WIL 4주차

프로덕트 디자이너 본캠프 WIL 4주차

 

- FACTS(사실, 객관) :이번 일주일 동안 있었던 일, 내가 한 일

카타 UI 컴포넌트

 

UX기획 및 리서치 강의 수강

 

- FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

 

이번에 UX로 넘어오면서 강의를 들었는데 UI보다 이론적인 부분이 많아서 이해하기 어려웠다

 

- FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것

 

 

카타 UI 컴포넌트 (리서치)

UI컴포넌트중 입력필드 리서치를 하면서 입력필드에 종류와 정의같은것을 조사하고 끝이났다.

 

UX 기획 및 리서치 강의

UX강의를 첫수강하였다. 먼저 전반적인 UXUI의 개념들과 더블다이아몬드모형등 방법론같은것을 배웠으며, LeanUX, MVP등의 개념을 이해하였다.

 

카타 UI 컴포넌트 (입력필드 추가 리서치)

 Filled text field(채워진 텍스트 필드) 와 Outlined text field 를 조사하면서 구글 검색바가 라벨이 없는 이유와

아마존 등 결제폼같은 입력필드에서 왼쪽 정렬 라벨을 사용하는 이유 등 여러가지를 배웠다.

구글검색바를 보면 라벨이 없는데 일단 이것도 아웃라인텍스트필드가 맞다. 라벨이 없지만 그 기능을 플레이스홀더로 대신하고있기때문이다. 여기서 플레이스홀더를 사용했을때 장단점이 있다.

요약해서 말하면 장점으로는 공간절약,간결함이 있으며 단점으로는 접근성 문제와 , 작업 확인의 어려움 등 많은 단점이있다. 그럼에도 불구하고 구글 검색바가 라벨대신 플레이스홀더를 사용하는이유는 사용자에게 입력을 받는 내용이 정해지지않았기 때문이거니와 그로인해 단점에 해당되는 부분이 많지 않고 장점은 해당되는 부분이 많기 때문에 상대적으로 많기 때문에 라벨을 생략하고 간결하게 플레이스홀더로 대체한것이다

 

예시로 아마존도 결제폼에서 왼쪽정렬라벨을 사용하고있는데 왼쪽정렬라벨도 인지부하 등 안좋은점이 있다. 하지만 그럼에도 쓰는 이유는 아마존의 상세결제페이지 작성폼 같이 평소에 자주 쓰지 않는 데이터가 많은 곳은 라벨을 먼저 읽고 입력 필드로 눈을 이동하는 과정에서 라벨과 입력칸의 관계를 쉽게 이해 할 수 있고 이는 효율적이고 명확한 정보 전달로 이어져 잘못된 입력을 줄이고 사용자가 폼을 빠르게 완료하도록 돕는다. 또한 폼이 간결하고 정돈되어 있으면, 시선 이동은 패턴을 따라 빠르게 익숙해질 수 있다

 

UX 기획 및 리서치 강의

리서치와 리서치결과정리를 배웠다. 정성적 리서치와 정량적리서치인데 이 둘의 차이점을 명확히 이해했고 과제를 통해 정성적 리서치의 종류인 심층 인터뷰 를 만들어보면서 한번더 이해했다.

리서치한것을 정리할때에는 박주현튜터님의 한장요약을 보면서 정리를 해보았다. 한장요약이지만 이것만 보면 대부분 할수가 있었다.

 

---

카타 (UI 컴포넌트) Bar

토글과 Bar에 대한 카타조원들의 리서치를 들었다.

 

토글을 할때 레이블이 스위치의 왼쪽이나 위에 배치하는것은 맞긴 하지만 언어권마다 글자를 읽는 방향이 다르다는것도

생각을 하면서 디자인을 해야한다 

 

우리나라는 왼쪽에서 오른쪽으로 읽는 방식이지만 아랍권같은경우 오른쪽에서 왼쪽으로 읽기 때문에 이런 문화적인것도 고려를 하는것이 좋다.

 

다음 토글은 대부분 값이 2개로 0과 1로 이루어진 디자인의 속성이 달라지는것이 토글의 속성이다.

그래서 체크박스나 라디오 등 말고 드롭다운 같은 UI는 토글로 보기엔 애매하다. 이것은 토글을 품고있는 UI로 봐야한다.

 

 

 

 

다음 사이클 셀렉션이라는 토글이 있다.

출처 : UI 카타 강진우튜터님

애플뮤직이나 음악앱에 주로 보이는 토글로 이것은 누를때 마다 상태가 바뀌는 UI로 토글로 볼 수가 있다.

하지만 이러한 토글의 경우 사용자가 사용해보지 않았다면 모를수가 있지만 요즘에는 대부분 알고 있다.

 

 

 

 

다음은 Bar에 대해 배운것

 

반응형 서비스를 만들때 디바이스별로 보여지는 Bar형태가 달라지는건 알고 있었지만 구체적으로 이번에 배웠다.

왼쪽부터 폰, 테블릿, 데스크탑 순서이며,  폰은 bar가 하단에 고정되어있는 형태고 테블릿은 내용이 많아 왼쪽으로 레일 형태로 바를 위치한 상태다. 마지막으로 데스크탑은 테블릿 형태에서 옆에 라벨이 추가된것을 볼 수가 있었다.

 

근데 여기서 데스크탑과 테블릿은 구글머티리얼 가이드를 보면 저런 형태는 네비게이션에서 네비게이션 레일 이라고하는데 이게 Bar와 뭐가 다른지 몰랐다.

 

 

 

 

모바일에서는 네비게이션 바의 형태고 테블릿과 데스크탑부터 네비게이션 레일의 형태인데 둘다 bar인가? 고민을 했다

 

물론 카타때는 그런 생각이 안들었고 TIL을 작성하다 이런 생각이 문득 들었다 그래서 한번 찾아보았다.

 

그렇다 네비게이션 레일도 네비게이션바의 수직형 변형이였다. 이름만 바에서 레일로 바뀌었던것이다.

위치와 메뉴항목들을 많던지 적던지의 차이만 있을뿐 둘다 바의 종류이다.

 

 

 

 

 

이것은 UI카타에서 강진우 튜터님이 Bar에 대한 팀원들의 설명을 간단하게 정리를 해주신 사진이다.

 

이게 Bar가 IOS와 안드로이드마다 이름이 달라 헷갈릴 경우가 많다고 하셨다.

안드로이드쪽으로 주로 만드는 디자이너가 네비게이션바라고 한다면 바텀네비게이션바일 경우가 많고 

그 반대로 ios에 경우도 그런 일이 종종 있다고 하셨다. 

 

 

---

 

튜터님과의 면담

오늘은 강진우튜터님과 개인과제 피드백겸 면담을 진행하였다.

먼저 전반적인 피그마 사용법은 잘하고있다고 해주셨다. 아직은 디자인감각이 부족하여 마진,폰트크기,간격 등을 잘 모르지만 클론디자인을 해보면 실력향상에 도움이 된다고 해주셨고, 클론디자인 할만한 레퍼런스를 주셔서 그것으로 클론 디자인을 하였다.

네이버카페홈 클론디자인이다.

옆에 두고 최대한 나의 디자인감각을 키운다는 목표로 이미지와 그런것들 제외하고 모두 하나하나 따라 그렸다.

이게 해보니깐 빨리 끝날줄알았는데 매우 오래걸렸다. 간격도 계속 바꾸고 폰트크기도 계속 바꿔보고 하니깐 시간이 훅갔다. 하지만 하다보니깐 패턴도 보이고 실력이 조금씩 향상하는것 같아 좋다.

 

 

 

UX개인과제 발제(사용성 테스트)

오늘부터 UX개인과제가 시작되었다.

과제내용은 사용성 테스트를 준비하고 실행후 인사이트 도출후 개선안 작업을 해보는것이다.

일단 사용성 테스트부터 막막했다. 하지만 실전에서 막힘없이 하기위해선 캠프에서부터 미리 어떻게 하는지 체험을 하는것이 좋다고 생각하였다.

일단 링크는 내일배움캠프의 실제 랜딩페이지를 활용하는것이고, 어떠한 목적을 하고 테스크를 만들지는 아직 정하지 못하였다. 주말에 정해서 평일에 사용성테스트를 바로 할수있도록 준비를 해야겠다.

 

결과적으로, 현재 나의 상태는 어떻게 되었지?

UI컴포넌트를 진행하면서 각 UI들의 정의및 do&don't을 알게되었다.

UX강의를 들으면서 방법론과 문제정의 가설수립, 사용성테스트 등을 이해했다.

 

이 상태에서 다음 일주일을 더 잘 보내려면 무엇이 필요할까?

오늘부터 UX개인과제가 시작했다. 가볍게 뭘 할지 살펴보았는데 아직 정하지 못하였다. 사용성테스트의 목표부터 막혀서 막막하지만 왜 내일배움캠프의 실제 랜딩페이지를 활용하라고 하였는지에 대해 고민을 해보면서 그에 맞게

목표를 잘 정해봐야겟다.