1. 디자인 카타

두 가지 UI를 보고 더 낫다고 판단한 UI를 선택 후 이유와 뒷받침할 근거를 찾는 과정.

​

​

콘텐츠 썸네일의 타이틀 노출 형태, 어떤 것을 선택하시겠어요?

​

​

A 선택

이유:

​

• A안의 경우는 영화가 상영될때 발매된 포스터의 타이포를 그대로 사용하기 떄문에 사용자가 포스터만 보고 영화의 장르나 어떤 내용일지 내가 보고싶어하는 장르의 영화일지 포스터 썸네일만 봐도 유추하기 쉽다.

• 포스터 안의 영화제목 폰트가 크게 들어가기 때문에 시인성이 높아진다.

• 화면 구성 상 포스터의 크기가 크게 배치가 되기 때문에 영화 타이틀도 포스터 안에 들어가는 것이

• 사용자가 이 영화가 어떤 영화 였는지 자연스럽게 사용자의경험을 꺼내올 수 있다.

• 이처럼 영화의 타이포가 크게 들어간 포스터를 배치한 A안이 사용자가 원하는 정보를 빠르게 제공할 수 있기에 A안을 선택했다,

​

​

B 선택하지 않은 이유

​

• 포스터내 이미지만 확대하여 배치 했기 때문에 포스터만 보고 영화를 유추하기 어렵다.

• 폰트가 통일 되어 있어 가독성은 좋으나, 작은 서브 텍스트 크기로 들어가기 떄문에

• 처음 화면을 본 사용자가 상대적으로 크게 배치된 포스터만 보고 영화 제목을 한 번에 찾지 못할수도 있으며

• 작은 글씨를 읽어야 하기에 불편할 것 같다.

​

​

​

주장을 뒷받침할 근거

2019년도넷플릭스 디자인팀의 인터뷰 기사

넷플릭스 디자인팀 인터뷰 “네버 세이 네버” https://byline.network/2019/05/03-8/

​

• 넷플릭스 디자인팀은 실제로 메뉴 화면에 배치되는 포스터에 굉장히 공을 들이고 있다.

• 사용자의 취향에 따라 작품이 품고 있는 다양한 요소를 포스터에 시각화 하기 위해 타이포그래피를 이용한다.

" 이 작품은 내가 보고싶어 하는 내용을 담고 있구나 하는 느낌을 받으실 수 있도록 돕는 것 이다. "

→ 사용자에게 메뉴화면 처럼 정보를 제공하며 사용자가 쉽게 선택할 수 있도록 할때에는 담긴 정보가 한 눈에 들어오고 다양한 디자인적 요소를 통해 자연스럽게 사용자가 이를 받아들이고 빠르게 선택할 수 있도록 해야한다는 나의 생각과 동일 했던 점.

넷플릭스는 회원들이 콘텐츠를 검색하고 고르는 시간을 줄이고 더 많은 시간을 콘텐츠를 즐기는데 사용할 수 있도록 노력하고 있습니다.

→ 기사를 읽으면서 가장 인상깊었던 구절

​

​

디자인 카타를 진행하면서 나의 개인적인 생각

• 오늘 디자인 카타에서는 상대적으로 UI의 중요성보다 타이포 같은 디자인적 요소가 사용자의 편리함에 얼마나 큰 영향을 미치는지 깨닫게 되었다.

• 실제로 3주차 피그마 강의에서 폰트가 사용자의 명시성가 가독성에 얼마나 많은 영향을 주는지 배웠지만 디자인 카타를 통해 더욱 확실하게 배웠던 것 같다.

• UIUX는 인터페이스 구성만 편리하도록, 눈에 잘 들어오도록, 사용자가 서비스를 이용하는 과정에서 불편함이 없도록 디자인하면 되는 줄 알았으나 화면을 구성하는 다른 디자인적 요소들도 같이 신경써야 비로소 완벽한 인터페이스가 되는 것 같다.

• 캠프를 참여하면서 이때까지 내가 배운 디자인들을 뒷전으로 두고 새로 배우는 피그마나 UI, UX에 대한 것들을 공부하기 바빴는데 디자이너라면 디테일한 부분까지 신경써야한다는 점을 다시끔 깨달았다.

• 개인적으로 다른 디자인들 보다 UXUI 디자이너가 가장 디테일을 많이 추구하는 것 같다.

• 깔끔한 디자인을 하는게 예쁘고 화려하게 만드는 것 보다 힘들다는 것을 다시 체감하게 되었다..

​

​

​

​

​

​

​

​

​

​

2. 피그마 기초 5주차

​

​

​

• 5주차 후반 강의에서는 프로토타입을 이용해서 우리가 설정해놓은 기능들이 실제로 잘 작동을 하는지 배우는 강의였다.

​

• 첫 번째 사진의 메뉴목록에서 통다리살 버거 옆의 X 아이콘을 사용자가 Tab 하면 메뉴 목록에서 해당 프레임이 사라지도록 하는 기능

• 프레임보다 콘텐츠의 길이가 길 때 사용할 수 있는 스크롤 기능

  →스크롤 기능은 프레임보다 콘텐츠가 길어야 기능이 작동한다.

​

5주차 과제

​

​

​

1) 쿠팡 상품 상세 설명 페이지 스크롤 기능 적용하기
→ 단, 상단의 app bar와 하단의 button 영역은 고정되어 있어야 한다.

• 상단의 app bar와 button 영역은 제외하고 중간지점의 상품 사진 프레임 부터 상세페이지 영역의 프레임을 선택
• Overflow 메뉴에서 Vertical 적용 후 프로토타입을 실행하면 가운데 상세설명란만 상하로 스크롤이 가능해진다!

​

​

​

​

2) 메뉴 페이지에서 히어로 영역 좌우 스크롤 적용하기.

• 히어로 영역의 프레임을 선택 후, 좌우 스크롤을 적용해야 하기 때문에 Overflow 메뉴에서 Horizontal 적용후 프로토 타입을 실행하면 히어로 영역만 좌우 스크롤이 가능해진다!

​

​

• 5주차에서는 그 외에도 실무에서 개발자, 다른 디자이너와 소통할 때 내가 만든 컴포넌트들을 어떻게 설명하고 기능을 작성 할 건지에 대한 것도 배웠는데 실제로 나는 오늘 강의에서 이 점이 가장 좋았다.

• 내가 항상 걱정했던 것은 내가 부트캠프를 수료 후에도 얄팍한 지식으로 입사를 하게 되어서 실무에 계신 개발자, 다른 디자이너분들과 소통할 때 나만 이야기를 알아듣지 못하거나 내가 만든 디자인이 이해가 안된다는 이유로 폐기처리 될까 무서웠다.

• 실무에서 디자인을 넘겨줄때 어떻게, 어떤 용어로 어떤 에티튜드로 작성해야하는지 까지 알려주셔서 정말 알찬 시간이었다.

​

​

​

​

​

​

3. UXUI 입문강의 1주차

​

Human Interface Guideline (FROM Apple)

​

​

​

​

• 이제 본격적으로 UI가 무엇이며, UX가 무엇인지에 대해 배우게 되었다.

• 뜻은 어느정도 알고 있었으나 UI가 진화해온 역사까지는 알지 못했는데 역시나 UI의 진화에는 IOS 앱 디자인이 한 몫 한 것 같다.

• 실제로 튜터님께서도 Human Interface Guidelines(HIG, 히그) 라는 사이트를 추가적으로 추천해주셨다.

• 이 부분에서 의문점이 든 것이 앱 스토어에 앱을 업로드 시키려면 저 공식을 따라야한다는 것인데 내가 궁금한 것은 저런 앱 가이드들이 일반적인 내용이고 대중화 되어있어서 저 사이트를 보고 공부를 계속 해야한다는 것인지 아니면 아직 나는 기초를 다지는 중인 노베이스 상태이기 때문에 가이드라인을 보고 감을 익히는 것인지 궁금해졌다.

• HIG 사이트의 의미가 궁금해진 것이다.

​

​

​

​

​

​

​

<<회고>>

• 어제는 3~4시에 집중이 안됐었는데 오늘은 거의 하루종일 집중이 안됐다고 해도 무방하다.

• 하지만 해야할건 해야하기에 꾸역꾸역 앉아서 강의를 머리에 집어넣었던 것 같다.

• 앞으로 4개월 더 참여를 하면서 목요일 금요일마다 지칠 순 없으니 체력을 기를 수 있는 방법을 찾아야 할 것 같다.

• 생각보다 UIUX 입문강의의 내용이 조금 심도 깊은 내용이 많다. 아직 1주차라 그저 외우면 될 것 같은데 앞으로의 과정은 내가 어떻게 받아들일지 조금 의문이 든다.

• 피그마 강의를 모두 끝마쳤기 때문에 UIUX 강의를 들으면서 피그마 툴이 잊혀지지 않으려면 앞으로 못해도 클론 디자인 작업을 진행해야할 것 같다.

• 앞으로 강의는 하루에 한 주차씩, 클론디자인 1개, 서적 공부를 하게 될 것 같다.