[UXUI 내일배움캠프] WIL #week3

 

3주차가 마무리됐다!

점점 어떻게 공부해야할지 감이 잡히는 기분이다.

과제가 시작되고 새로운 강의에 특강까지 여러모로 바쁜 한 주였다.

이번 한 주 동안 어떤 걸 공부하고 무엇을 느꼈는지 적어보겠다~.~

 

 

1. 11번가 앱 분석 과제 마무리

 

3/4~3/6

 

 

총 사흘 간 진행한 과제로, 11번가 앱 사용자를 분석하고 문제를 발견한 후 그 문제점에 대한 솔루션을 도출하는 과제를 진행했다. 11번가의 사용자 분석을 위해 앱스토어의 리뷰를 참고하고, 그 중 앱 개선에 도움이 될 것 같은 리뷰를 선정하여 그걸 기반으로 공감지도와 5why를 작성했다. 이 때 내가 발견한 나의 문제점은, 처음 발견한 문제점에 왜?라고 붙이며 내려가는게 아니고 최종적인 문제점부터 거꾸로 올라가게된다는 점이었다. 마음을 비우고 내가 11번가를 애용하는 40대 기혼 여성이 됐다고 생각하며 가설을 세워봤다.

 

다른 소셜 커머스 앱과 11번가의 가장 큰 차별점은 바로 아마존 서비스인데, 11번가 앱은 이런 아마존 서비스를 크게 강조하지 않는다. 사용자가 여러 번 눌러야 아마존 페이지에 접근할 수 있는 등 접근성 방면에서 문제점이 많아 나는 아마존 서비스와 기존 쇼핑 서비스를 확실하게 분리시키고 중구난방한 컨텐츠 색상, UI 버튼 등을 정리하는 것을 해결방안으로 삼았다.

 

 

그리고 지난주에 배운 UXUI 심리학 법칙들을 기반으로 솔루션을 도출했다. 최종 디자인하는 것이 과제는 아니지만, 앱에 원래 있는 요소로 솔루션 화면을 하이파이 와이어프레임 수준으로만 제작해봤다.

 

사실 처음 제출한 초안은 근거나 어떠한 부가적인 설명을 따로 붙이지 않아 스스로도 기획이 굉장히 부족하다고 느껴졌는데, 3/6 아침에 나누어주신 해설영상을 기반으로 기획 부분에 내용을 추가할 수 있었다. 무엇이든 리서치가 굉장히 중요하다는 걸 알고 있었으면서도 내심 귀찮음에 패스해버린 것 같아 반성했다.

 

 

 

 

2. Figma 활용법 (1) 수강

 

3/7~3/8

 

 

과제를 마무리하고 새로운 피그마 강의를 듣기 시작했다. 처음엔 피그마의 기초에 대한 이야기가 나와서 본캠프를 시작하자마자 들은 <PPT보다 쉬운 피그마> 강의와 비슷한 수준의 강의일거라고 생각했는데 뒤로 갈수록 훨씬 유익하고 내용이 많았다. 원래 알고있던 내용에 새로운 내용이 합쳐지니 조금 혼란스러웠지만 다행히 금방 적응하고 어렵지 않게 따라갈 수 있었다. 

 

특히 3강, 4강의 내용이 실무에서 많이 사용될 것 같고 그만큼 체계적이고 복잡했다. 4주차 숙제에선 처음으로 간단한 숙제에 1시간 이상 사용하기도 했다. 

 

강의 내용에 대해서는 전 글에 자세히 정리해뒀다! 🤓

https://nannannan.tistory.com/8

[스파르타코딩클럽] Figma 활용법 (1) 강의 후기

 

 

 

 

3. 예쁘게 말하기 특강

 

3/5

 

 

3월 5일 7시 즈음, 예쁘게 말하기 특강이 진행됐다. 소통과 협업의 중요성에 대한 강의였고, 당연히 협업이 중요하다는 걸 알면서도 내심 혼자 빨리 앞서 나가길 원하는 나에게 유익한 강의였다.이 특강에서 배운 신입이 자주 하는 잘못된 생각이 딱 내가 하고 있는 짓이라는 걸 깨달았다.

 

1. 일을 빨리 하고 혼자 업무하는 사람은 일 잘하는 사람이 아니다. 리스크 관리가 어려운 위험한 사람이다.

2. 실력은 직무스킬이 아니다. 인성(협업 능력)을 갖춰야한다.

3. 직장 내 사교활동은 많을수록 좋은 것이 아니다. 비즈니스 관계와 사적관계를 구별해야한다.

 

또 샌드위치 화법에 대한 내용이 나왔다. 샌드위치 화법이란 이를테면 쿠션어 같은 개념이다.

 

빵 : 인정, 공감, 칭찬, 감사의 말

속재료 : 하고자 하는 진짜 말

빵 : 격려, 감사, 지지의 말

 

이미 일상 생활에서 사용하고 있다는 생각이 잠시 들었으나 더 깊게 생각해보니 이런 화법을 써야지! 생각만하고 실천은 안한듯. 회사 생활을 안해서 그런걸까? 그래도 일상생활에서 실천을 해야 나중에 회사에 취직하고 문제가 없을 것이 분명하니 이 화법을 습관화하자.

 

특강에서 강사님께서 책을 추천해주셨는데, 그 다음날 도서관에 갈 일이 생겨 저녁시간에 후딱 가서 빌려왔다.

< 도널드 노먼 - 디자인 심리학 > 이라는 책이다. 아직 다 읽어보진 않았는데 굉장히 인류애가 생김과 동시에 사람이 어떻게 생각하고 행동하는지에 대해 자세히 나와있어서 UXUI 디자이너들에게 굉장히 유익할 것 같다. 왜 추천해주셨는지 알 것 같다!

 

책 후기는 다 읽고 다른 게시글로 남겨볼 것이다.

 

 

 

 

4. 디자이너가 꼭 알아야 할 UI가이드 TOP 5 특강

 

3/8

 

 

그리고 오늘 7시에 특강이 진행됐다. 과제 없이 강의만 듣는 시기에 특강을 해주시니 숨돌리기도 되고 좋았다. 이번 특강은 전체적으로 피그마 활용법 강의와 관련이 있는데 조금 더 실무에 필요한 핵심만 쏙쏙 골라 알려주시는 느낌이었다. 타이포그라피 / 컬러 / 아이콘 / 웹 접근성 / 레이아웃 이렇게 총 5개의 UI 요소에 대한 이야기가 나온다. 

 

1. 타이포 그라피

Apple과 Android, 두 운영체제에 기본적으로 사용되는 시스템 폰트에 관한 이야기와 앱 디자인에 사용되는 폰트 사이즈, 계층구조란 무엇인지와 일관된 폰트 스타일에 대해 알려주셨다. 

타이포그라피에서 유의해야할 체크리스트

 

2. 컬러

컬러비율(70:25:5)에 대한 이야기와 컬러의 종류{기본컬러, 서브컬러, 뉴트럴컬러, 시멘틱컬러, 확장된 컬러}, 그리고 형태와 색의 연관성에 대한 설명을 해주셨다. 이 컬러에 대한 설명은 브랜드과 밀접한데, 예시로 스타벅스가 나와서 괜히 반가웠다.

컬러에서 유의해야할 체크리스트

 

3. 아이콘

아이콘이 가져야 할 규칙(명확성, 스타일, 일관성, 시각보정, 단순화)와 아이콘의 작업영역, 형태에 대한 이야기를 해주셨다. 여기서 흥미로웠던 부분은 시각보정! 나는 지금까지 마냥 그리드에 맞춰 무조건 대칭으로 디자인 하는게 맞는거라고 생각했었는데. 이런 원리가 있는지 몰랐다. 앞으로는 나의 눈을 믿고 한 번 내가 편한 디자인을 해보자는 생각이 들었다.

아이콘에서 유의해야할 체크리스트

 

 

4. 웹 접근성

다른 요소에 비해 이 개념은 조금 멀게 느껴졌는데, 웹 접근성은 모든 사용자가 신체적, 환경적 조건에 관계없이 동등하게 웹에 접근할 수 있도록 하는 것이다. 가장 명확한 방법은 명도 대비에 신경쓰는 것이다. 흰 배경에 검정 글씨와 같이 대비감을 크게 주어 색약, 시각적으로 불편한 사람들도 편하게 앱을 이용할 수 있도록 하는 것에 유의하자.

웹 접근성에서 유의해야할 체크리스트

 

5. 레이아웃

레이아웃에는 고정역역과 가변영역이 있다. 고정영역은 콘텐츠에 변화없이 스크린 변화만 있는 것이고, 가변영역은 스크린 변화에 따라 콘텐츠의 수가 늘어나고 줄어드는 것이다. 그리고 피그마활용법 강의에도 나온 8배수 디자인에 관한 내용도 나왔다. 최근에는 4배수, 2배수를 위주로 사용한다고 한다. 여기서 너비가 홀수인 프레임에서 디자인 할 때에도 2,4,8배수 디자인이 가능한지 질문했는데, 괜히 마진에서 양 옆에 0.5를 곱해 콘텐츠 영역을 짝수로 만들었다가는 나중에 규격이 안맞는 문제가 생길 수도 있기 때문에 그냥 홀수가 들어가야만 하는 경우에는 홀수를 사용하고 가변영역에는 4배수를 사용한다는 답변을 받았다.  

레이아웃에서 유의해야할 체크리스트

 

 

---

 

이렇게 3주차도 마무리됐다! 다음주부턴 아티클 스터디와 새로운 강의가 시작되어 기대되면서도 슬슬 허리가 아픈 것 같아 컨디션 관리를 해야겠다는 생각이 든다. 그리고 항상 후회하는 점이지만... 정말로 다음주부터는 기획에 진득하게 힘을 쏟아보자!