내일배움캠프/본캠프 TIL 50

TIL 32일차

TIL (Today I learned)  오늘 나는 무엇을 했나요-노코드 강의 1~3강 복습-디자인 카타  Saas 리서치-서비스 랜딩페이지 개인과제 발제 듣기오늘은 어떤 것을 배웠나요오늘은 서비스 랜딩페이지 개인과제 발제 날이다.  노코드 강의 1~3강 복습 그래서 노코드강의를 일단 3강까지 들은다음 다시 1강부터 3강까지의 결과물을 강의를 안보고 만들어보았다.확실히 처음만들때는 전체구조를 잡는게 어려웠는데 지금은 전체구조를 잡는것이 능숙해진것같다.피그마에서는 디자인만 하고 레이아웃의 구조를 직접 잡거나 이름하나하나 정하지 않는데 웹플로우는 디자인툴이 아니라일단 레이아웃의 순서와 각각의 클래스를 다 잡는법을 배워야 나중에 작업할때 이상한곳을 쉽게 수정할수있는것같다.   그다음은 디자인이나 인터렉션 반응..

TIL 31일차

TIL (Today I learned)  오늘 나는 무엇을 했나요-노코드 강의 1주차 수강-디자인 카타  OS별 UI차이 발표-튜터님과 UX개인과제 디벨롭에 대한 면담오늘은 어떤 것을 배웠나요1. 노코드 강의 1~2주차 수강 웹페이지의 기본 구조는 블럭형태고 그안에 HTML CSS 자바스크립트가 있다. 일단 HTML과 CSS의 개념을 다시 한번 복습한후 자바스크립트를 추가로 배웠다.사람으로 치자면 HTMl이 뼈대고 CSS가 그위에 복장및 꾸밈요소라면 자바스크립트는 행동이라고 생각하면 된다. 실습으로 About 페이지를 만들었다.순서로는1.전체 구조 잡기2.디자인 입히기3.유저 인터렉션 추가하기4.반응형 디자인하기이다 1. 전체구조잡기 먼저 구역을 잡는것이다.히어로,히스토리,프로젝트,컨택트 구역을 잡는다...

TIL 30일차

TIL (Today I learned)  오늘 나는 무엇을 했나요-퍼블리싱 실시간 강의 (마무리)-디자인 카타  OS별 UI차이 리서치 오늘은 어떤 것을 배웠나요1. 퍼블리싱 실시간 강의오늘은 퍼블리싱 마지막 강의다. 1.Grid와 flex로 행, 열로 요소를 정렬하는 방법2.트랜지션과 애니메이션으로 이벤트발생하기3.반응형 디자인을 이용하여 이것을 grid와 flexbox를 이용하여 반응형 레이아웃 만들기를 배웠다. 1-1. flexflex는 1차원적으로 그저 행과 열로 요소를 정렬하는방법이다.이때  Flex에는 줄바꿈 기능이있는데 요소가 컨테이너를 벗어날때 1줄에서 2줄로 줄을 바꾸는 등의 기능이 가능하다. 1-2.GridGrid는 2차원적으로 표에 요소를 하나하나 배치하는것처럼 좀더 디테일하게 행열을..

TIL 29일차

TIL (Today I learned)  오늘 나는 무엇을 했나요-퍼블리싱 실시간 강의-디자인 카타  OS별 UI차이 리서치-UX개인과제 디벨롭오늘은 어떤 것을 배웠나요1. 퍼블리싱 실시간 강의  오늘은 CSS에 대해 배웠다. 그전에 어제 배운 HTML에 대한 간략하게 설명을 하고 넘어가겠다. 먼저 HTML은 웹페이지의 뼈대이다. 예시로는 제목, 문단, 이미지, 링크 등 배치를 구성할수있다, HTML은 HyperText Markup Language의 약자로, 웹 페이지의 구조를 정의하는 마크업 언어이다.쉽게말해 우리는 이해하는 글과 그림을 컴퓨터는 이해하지못하므로 그것을 알려주는 글쓰기 방식이다. HTML의 역할은 블록을 쌓는것처럼 웹 페이지를 구조화하고 브라우저에게 그 구조를 알려준다. 기본 구조HTM..

TIL 28일차

TIL (Today I learned)  오늘 나는 무엇을 했나요-팀과제 (UX 프로젝트)오늘은 어떤 것을 배웠나요1. 오늘은 사용성테스트 마무리를 하였고( 튜터님의 피드백으로 계속해서 UT를 진행할때마다 보완을하고 보완한걸로 진행을 했다 )첫번째 UT시나리오인데 "시간협의가 가능한" 조건이 있었는데 이 조건때문에 알바공고리스트의 갯수가 확 줄어들어시간협의조건 을 없애고 두번째 UT를 진행하였다.     두번째 UT를 진행한후 사람들이 조건을 듣고 하는 첫번째 테스크에서 너무 헷갈려하여 첫번째 테스크전에 테스크를 수정을하였다.이런식으로 먼저 평소에 어떤 방식으로 채용 공고를 찾는지를 확인하고 난후 원래 첫번째 테스크를 진행하였다.   그후 나온 인사이트들 ( 구글폼, 유저플로우 사용성테스트) 을    어..

TIL 27일차

TIL (Today I learned)  오늘 나는 무엇을 했나요-팀과제 (UX 프로젝트)오늘은 어떤 것을 배웠나요1. 오늘은 일단 유저플로우를 다그린후.  사용성테스트 시나리오를 작성을 하였다. 그리고 피드백을 받았다. 먼저 직접적으로 불편하거나 하냐는 단어를 질문으로 하면 유도가 될수있기 때문에 지양하는게 좋다고 하셨다.그러한것들을 다 찾아 변경하였다. 그다음 UT를 진행할때는 5명을 진행한다하면 하나의 질문지로 5명을 하는것이 아닌 UT를 해나가면서 그에 대한 인사이트를 도출하여 보완한 질문지로 차근차근 하는것이 좋다고 하셧다. 그리고 앱에 스크랩페이지에서 필터기능이 없어서 우리가 이러한 필터에 대한 문제를 UT로 테스크를 주어서 사용자가 어떻게 느끼는지를 볼려고 작성을 하였는데 이러면 이 필터에 ..

TIL 26일차

TIL (Today I learned)  오늘 나는 무엇을 했나요- 카타 ( Mobile only 컴포넌트  )- 개인과제  ( 사용성 테스트 ) 오늘은 어떤 것을 배웠나요1.카타 (모바일 컴포넌트)오늘도 각 카타조원들이 조사한것을 발표하였다.리스트와 카드, 그리고 내가 조사한 캐러셀이었다.알게된점은 리스트와 카드가있을때 카드는 항상 텍스트와 이미지가 같이 들어가야하는게 아니고 텍스트만 들어가는 경우도 있다.또 리스트와 카드는 둘다 원칙이있었다. 리스트 원칙1.논리적이여야한다.목록은 내용을 쉽게 검토할수있는 논리적인 방식으로 해야함즉 알파벳순, 숫자순 등 또는 사용자 선호도순으로 정렬해야함2.실행 가능해야한다목록은 컬렉션에서 특정 항목을 쉽게 식별하고 해당 항목을 사용하여 작업할 수 있는 방식으로 콘텐츠..

TIL 25일차

TIL (Today I learned)  오늘 나는 무엇을 했나요- 카타 ( Mobile only 컴포넌트  )- 개인과제  ( 사용성 테스트 ) 오늘은 어떤 것을 배웠나요1.카타 (모바일 컴포넌트)오늘은 각 카타조원들이 조사한것을 발표하였다. 탭, 로딩인디케이터을 발표를 하였는데 그중 로딩인디케이터에서 배운점이 있었다. 먼저 로딩 인디케이터는 사용자가 시스템의 작업 상태를 이해하고 기다리는 동안 불편함을 최소화 하도록 돕는 UI이다. 로딩인디케이터에서는 각 종류가 많았는데 그중 스켈레톤같은경우는 모바일은 빈공간이 많아 활성화된 경우라고 한다.그외에는 우리가 자주 보는 스피너 형식, 프로그레스바 형식,애니메이션일러스트등이있다.  다음 로딩인디케이터는 안보여주는게 최선이지만 기술적으로 어쩔수없을때 보여주는..

TIL 24일차

TIL (Today I learned)  오늘 나는 무엇을 했나요 - 카타 ( Mobile only 컴포넌트  )- 개인과제  ( 사용성 테스트 ) 오늘은 어떤 것을 배웠나요1.카타 (모바일 컴포넌트)오늘은 저번에 이어서 캐러셀UI에 대해 리서치를 마저 진행하였다. 저번에 대부분 다 끝내서 이번에는 캐러셀의 PC와 모바일의 차이점을 조사를 하였다. 먼저 차이점은 크게 3가지로 나눴다. 1. 디스플레이 크기와 레이아웃2.인터랙션 방식3.콘텐츠 크기와 정보량   디스플레이 크기와 레이아웃 PC (네이버스토어예시)1.네이버스토어를 예시로 보면 가로 폭이 넓어 한 화면에 여러 개의 콘텐츠를 표시하고있음2.아래처럼 보통 한 번에 3~5개의 슬라이드를 보여줌 모바일 ( 네이버스토어예시)1.화면이 좁아 한 번에 1~..

TIL 23일차

TIL (Today I learned)  오늘 나는 무엇을 했나요 - 카타 ( Mobile only 컴포넌트  )- 개인과제  ( 사용성 테스트 ) 오늘은 어떤 것을 배웠나요1.카타 (모바일 컴포넌트)오늘은 카타가 다시 시작하였다.저번에는 UI컴포넌트를 하였다면 이번에는 모바일 컴포넌트에 대해 리서치및 조사를 진행하였다.터치 제스처로딩 인디케이터리스트/카드캐러셀푸시/알림이렇게 총 5개중 나는 캐러셀 리서치를 맡았다. 리서치를 한것을 요약하면  정의와 목적이름: 캐러셀(Carousel), 슬라이더(Slider), 갤러리(Gallery)역할: 공간을 효율적으로 사용해 여러 콘텐츠를 표시하며, 사용자가 스크롤을 통해 쉽게 탐색할 수 있도록 돕습니다. iOS에서는 페이지 컨트롤, Android에서는 뷰페이저나 ..