[11/01 부트캠프] 카타, 피그마 활용법 강의(2) 2주차, 개인 과제, WIL

 

프로덕트 디자이너 부트캠프 D-10 (2주차)

📌To Do List

* 카타: 웹사이트

* 피그마 활용법 강의(2) 2주차

* 2주차 개인 과제 (숙제)

* 면담: 20분

* TIL/WIL

 

 

부트캠프 시작한지 아직 2주일도 되지 않았다.

이거 실화인가 거짓인가...

 

ㅇㅈ님이 강사님 비맞고있다고 갑자기 보내주신 동영상

강사님이 비를 맞아...? 무슨 비..? 하고 동영상 봤는데

ㅋㅋㅋㅋ진짜 비를 맞고계셨다ㅋㅋㅋㅋㅋㅋ

넘 웃긴 포인트라 영상업로드★

---

01 카타: 웹사이트

좀 늦게 일어나서 부랴부랴 카타를 진행하다보니 멍... 했다.

일어난 직후엔 머리 회전율이 빠르지 않은 것 같다..그냥 보는데 멍~한느낌ㅠ

뇌가 생각을 할 수 있게 1시간 전에 일찍 일어날 필요가 있겠다.

 

카타가 분석능력을 업시켜주는 게 확실히 맞다.

랜딩페이지까지만 해도 분석하는게 쉽다고 느꼈는데

웹사이트 분석하려니까 음...? 뭘 분석해야하지? 싶었다 ㅋㅋㅋ

뭐..에 집중해야하지? 기업은 무엇을 추구하는거지....? 하는 생각들...

 

그래서 오늘은 제대로된 분석을 하지 못했다 ㅠㅠ..

다른 분들도 이렇게 생각하지 않을까 싶었다.

 

그래서 사실 강의보다는 분석능력을 업그레이드하고싶기에 오늘 오전시간은 분석하는 시간을 스스로 가졌던 것 같다.

코멘트를 좀 많이 남긴 것 같다. 구석구석 뜯어보는 느낌으로 분석 해봤다.

이 문구가 왜 이렇게 써졌는지 의문이 들 때도 있고

괜찮네 싶다가도 더 잘된 예시가 있으면 아 이렇게도 만들 수 있구나 하면서 깨달음을 얻었던 것 같다.

같은 내용이더라도 각자가 추구하는 목표, 가치, 상품, 브랜딩에 따라 이렇게 달라진다.

 

 

 

분석을 잘하기 위해서 여러가지 관점에서 생각해볼 필요가 있을 것 같아서 내가 생각해본 분석 시 고려사항을 정리해봤다.

 

1. 기업이 무엇을 목표로 하는지 방향성을 설정할 필요가 있다.

- 여러가지가 있을 수 있을듯: 기업이 추구하는 가치를 심도있게 알려주고싶어요, 크레이티브한 디자인회사라는 것을 알리고싶어요!, 우리는 스토리로 하여금 사용자를 사로잡고 싶어요!, 사용자가 우리의 서비스를 편하게 이용하면 좋겠어요 등 방향은 제각각이다!

 

2. 타겟층이 누구인가?

- 이 점은 중요하게 작용하는 것 같다. 사용자/고객이 누구인지에 따라 의도와 방향이 바뀌기 때문!

- ex. 50대 남성 타겟 구독자 -> 직관적인 문구와 큰 폰트, 깔끔한 구성, 필요한 정보만 쏙쏙

- ex. 20-30대 토스를 가고싶은 취업층 -> 친근한 이미지, 신박한 방식의 지원서, 토스문화 알려주기, 관련직군 인터뷰영상 등

 

3. 사용자의 니즈와 제공하고싶은 것은 다르다?

- 사용자는 A라는 정보를 원하지만 기업은 B라는 정보를 알려주고싶다면 사용자가 필요한 게 아니기때문!

- 사용자에게 이런게 있으면 좋다고 생각해서 만들었는데 정작 사용자는 필요하지 않은 경우 발생할수도!

 

4. 사용자의 문제점을 해결할 수 있는 방향으로 기획하고 디자인 해야겠다. 문제가 발생했을 때, 어떻게 해결해야할 지 해결책은 꼭 찾아보려는 태도가 중요한 것 같다!

- 이 웹사이트를 이용하며 사용자의 생각에 공감하고 그들은 어떤것을 고민할까? 그리고 이것을 어떻게 해결할까?를 고민하는 태도도 가져야겠다. 

- ex. 폰트 사이트: 이 폰트가 무엇인지 궁금해서 올리는 게시판이 있다.

   ***문제점 발생: 근데 정답을 찾으려면 사용자들이 정답을 알려줘야해서 답을 얻는데 시간도 오래 걸리고 답을 못 얻을 수도 있다.

   ***해결: 궁금한 폰트 이미지를 특정 페이지에 업로드했을 때 사용자가 아닌, 페이지 자체에서 비슷한 폰트를 찾아주는 기능을 도입해보는 건 어떨까? 혹은 이와 비슷한 고민을 가진 다른 사용자의 이미지를 AI가 분석해서 매칭하여 해당 답변에 달린 댓글까지 볼 수 있게 한다면?

-> 이럴 경우 전체페이지를 뜯어고쳐야하지만^^.. 대충 이런식의 방법을 생각해보았다. (비슷한 폰트 추천 기능의 경우 산돌구름에서  실행중!)

 

 

 

---

02 피그마 활용법 강의 (2) 2주차

📌다양한 환경에서의 UI차이

 

* 웹 브라우저: 사파리, 크롬, 삼성 인터넷...

 

[웹/앱 특성]

특성 비교	웹 (Web)	앱 (App)
운영체제 제한	없음	안드로이드와 IOS앱 별도로 준비
접근성	웹브라우저에 주소만 입력하면 가능	앱 마켓에서 설치
업데이트 난이도	쉬운 업데이트	앱마켓 심사를 통과해야 가능
인터랙션 및 UI	웹브라우저와 충돌하지 않는 선에서 가능	다양하게 사용 가능
성능	다양한 기기에서 제한없이 사용 가능하나, 그만큼 카메라, GPS, 사진 보관함 등 성능 떨어짐	기기에 특화된 기능 사용 가능하나, 다양한 디바이스 지원 제작의 어려움
개인화	푸시, 알림 제공 어려움	푸시 메시지 보낼 수 있음

 

 

[앱/웹 차이점]

1) 페이지 이동

* 앱: 임의로 주소 입력 후 이동

→ 문제점:볼 수 없는 화면에 접근할 수 있음

→ 해결책: 정상화면으로 돌려보내야한다

* 웹: 주소창에 URL 입력 시 어디든 갈 수 있음

URL를 직접 입력해서 주문서 화면으로 이동하면 잘못된 화면이라고 안내해주고, 장바구니 페이지로 안내

 

 

2) 뒤로가기

* 앱: 뒤로가기 버튼

* 웹: 브라우저 자체에서 뒤로가기 가능. 

→ 문제점: 접근 불가능한 화면에 접근할 경우, 문제 발생(결제 2번, 취소 여러번)

→ 해결책: 뒤로가기 했을 때 사용자에게 안내할 페이지를 개발자와 의논

 

3) 주요 메뉴 이동

* 앱: 화면 하단 탭 기능

* 웹: 화면 상단

두 UI는 동일한 목적과 기능을 가지고 있지만, 웹과 앱에서 다르게 나타나는 대표적인 UI

최근엔 웹도 앱처럼 하단에 배치함.

 

 

 

4) 바텀 시트: 화면 하단에 고정되어 현재 화면과 관련된 옵션이나 메뉴를 제공하는 UI - 컨테이너 컴포넌트

- 화면의 하단에 고정

* 앱: 드래그해서 닫을 수 있음.

* 웹: 사용이 까다롭다, 드래그해서 닫기 어렵다

- 웹브라우저의 기본 UI: 스크롤 시 숨겨져 있다가 등장함. 그 과정에서 사용자의 바텀 시트의 위치에 계속 영향을 줘 불편하다.

 

 

[OS별 차이]

💡운영체제(Operating System;OS)
- 앱, 프로그램 실행하는 배경이 되는 시스템.
ex. ios/안드로이드, Macos/Window

*앱 심사 가이드라인
- 앱: 앱스토어, 플레이스토어 등 앱마켓에 등록해야 사람들이 설치 가능. 따라서 앱 심사 가이드라인에 따라야함. 그렇지 않을 경우 거절당할 수도 있다.

왼쪽: 안드로이드 / 오른쪽: 아이폰

 

* 아이폰

- 애플 로그인이 안 중요해보이지 않도록.

- 소셜로그인: 애플 로그인은 반드시 포함시킬 것.

 

 

 

OS를 고려했을 때 우린 무엇에 신경써야 하는가?

 

 

1) ios 홈 인디케이터: 아이폰 홈 화면 이동 UI - 하단에 고정된 UI에 신경써야함

- 화면 영역에 있어 다른 화면과 겹침.

- 이전엔 홈버튼이 기기에 있었지만(가운데 동그라미) 지금은 홈 화면에 존재하므로 고려해야한다.

 

왼족 안드로이드/오른쪽 ios .... ios는 홈 콘텐츠를 가린다.

 

 

2) 안드로이드: 네비게이션 바 뒤로가기

- 뒤로가기 버튼 제공: 뒤로가기 버튼 만들지 않아도 된다.

- 뒤로가기 버튼의 2가지 기능

① 이전 화면으로 이동
② 상위 화면으로 이동

- 접근한 페이지를 알파벳으로 나타냄. 예를들어 A-B-B2-B3 경로로 갔는데 안드로이드에서 뒤로가기 눌렀을 때 B2로 가야될 게 A로 가버림. - 이 경우 어디로 갈 것인지 디자이너가 규정해야한다.

왼쪽 ios / 오른쪽 안드로이드

 

어떻게 디자인해서 사용자에게 최선의 결과를 줄 수 있을까? 고민해야한다.
무조건 이렇게 해야하는 것은 아니기 때문!

 

 

 

📌정보구조도와 플로우차트

- 제품 사용 과정을 논리적으로 디자인하기 위한 문서

- 필수과정X.  사정에 따라 유연하게 적용하며 만드는 시점, 형식 모두 다를 수 있다.

💡정보구조도(IA: Information Architecture)
- 화면과 제품이 어떻게 연결돼있는지에 대한 설계도

 

💡플로우차트(Flowchart) = 유즈케이스
- 사용자가 어떤 과정으로 제품을 이용하는지 시각적으로 정리한 순서도

*순서도: 프로세스를 보여주는 다이어그램. 상자들과 화살표를 이용해 문제에 대한 해결과정을 도식화한 것.

 

플로우차트 그릴 때 표준 규칙 참고할 것.

사이트 바로가기

 

이 세가지는 꼭 알아두기. 주로 이 기능만 쓴다

*결정: 조건분기. Yes or No, 사용자의 선택에따라 어떤 방향인지 나눠지는 방향.

 

 

 

와이어프레임, 프로토타입 만들기 위해 사용자 시나리오가 필요하다.

사용자 시나리오를 만들기 위해 정보구조도 작성하고 플로우차트 만들어아햔다. (자세한건 ux파트에서 배운다고함)

 

 

 

 

📌와이어프레임

💡와이어프레임(Wireframe)
- 화면과 시나리오를 최대한 단순한 형태로 만들어서 빠르게 만든 것.
- 선으로 그려진 화면
- 낮은 단계의 프로토타입이라는 뜻에서 Lo-fi Prototype 이라고 불림.

 

[와이어 프레임은 왜 만들까?]

1) 팀원 간 생각 통일과 원활한 협업

- 글만 봤을 때 생각하는 게 다 다를 수 있다

- 아무리 단순해도 이해가 다른 부분을 줄일 수 있다

 

2) 디자인 관리가 쉽고, 불필요한 부분에 시선을 뺏기지 않는다.

- 너무 다 완성시키면 사용자 시나리오 집중에 어렵다.

- 빠르게 수정할 수 있고 디자인 방향을 잡아가며 완성도있게 만들 수 있다.

 

3) 습관 형성 모델을 반복적으로 실험할 수 있다 (사람들이 어떻게 해야 우리 서비스를 습관적으로 쓰게할까?)

- 사용자의 습관이 형성될 수 있도록 사용자 시나리오를 작성하고, 와이어 프레임을통해 그 과정이 매끄러운지, 부족한 건 없는지 빠른 검증 가능.

 

 

 

[와이어프레임 그리는 법]

-목적: 빠르고 효율적인 커뮤니케이션, 일관된 디자인 방향.

- 손, 종이로, 파워포인트, 피그마 .. 어떤 방식이든 상관X

 

1) 와이어프레임 규칙

- 표현할 것, 표현하지 안흥ㄹ 것을 과감하게 고르기

- 단순,빠르게하기위해 단색의 선 권장.

 

2) 그리고자하는 화면 스케치

- 최대한 단순하게

- 필요하지 않은 부분은 과감하게 글자, 단순도형으로 대체

- 텍스트: 최대 길이 가늠 가능하도록 최대로 넣기.

 

 

3) 화면을 선으로 연결하기

- 목적: 화면들이 어떤 관계로 이어져있는지 파악하기 위해

 

 

 

 

--->선을 연결할 수 있는 플러그인 추천: Simpleflow(최대한 무료 플러그인!)

 

 

---

✍️개인 과제

과제 1. OS와 플랫폼에 따라 UI에 차이가 있는 부분을 찾고 이유를 생각해보세요

① OS 별로 차이가 있는 부분을 찾아보고, 왜인지 나름의 이유를 적어 보세요.

동일한 앱의 UI가 안드로이드 기기와 아이폰에서 다르게 보이는 부분을 찾고 왜 다른지 다양한 이유를 논의해 보세요.

• 최소 2개 이상의 앱에서 2곳 이상 찾아 주세요.

 

② 웹과 앱에 차이가 있는 부분을 찾아보고, 왜인지 나름의 이유를 적어 보세요.

동일한 서비스의 UI가 앱과 모바일 웹에서 다르게 보이는 부분을 찾고 왜 다른지 다양한 이유를 논의해 보세요.

• 최소 2개 이상의 제품에서 2곳 이상 찾아 주세요.

홀리...sh... 아빠찬스를 써야겠다!

 

①

카카오맵

 

네이버 앱

 

 

②

지니

 

카카오맵

알바몬

---

 

 

과제 2. 가상의 서비스를 만든다고 가정하고, 와이어프레임을 만들어 주세요.

다음 중 하나를 골라 와이어프레임을 만들고, 각 화면들을 선으로 연결해 주세요.

📌 구성은 유사한 서비스들을 참고해서 자유롭게 해주세요.

• 가상의 OTT 서비스의 콘텐츠 목록 화면과 콘텐츠 상세 정보 화면
• 가상의 굿즈 커머스 서비스의 제품 리스트 화면과 제품 상세 정보 화면

 

생각보다 시간이 더 걸렸다 ㅠㅠㅠ

ios와 안드로이드의 차이, 웹/앱 차이, 그리고 지금까지의 방법을 응용해보려고 와이어프레임 만들때도 컴포넌트를 적용하는데

어려움이 있었던 것 같다.

 

특히 컴포넌트에 오토레이아웃까지 적용되면 너무 헷갈린다.

오토레이아웃은 언제쓰는거지..? 컴포넌트 안에 오토레이아웃이 적용된 경우가 있고

컴포넌트 밖으로 오토레이아웃이 적용된 경우가 있는데

어떤 것을 조절해야 패딩값이 조절되는지.. 너무 헷갈려서 붙잡고있었던 것 같다.

 

그래도 한 번 확실하게 배워둬야 나중에 했을 때 기억나니까!

---

03 면담

5분 전에 zep에 접속했더니 남자 상담튜터분께서 기다리고계셨는데

보자마자 3가지 질문에 답하라고 했다...

약간 면접 분위기여서 긴장됐는데 그래도 내 방향성을 잡아주실 분이라고 생각해서

그냥 주저리,, 말했던 것 같다ㅋㅋ

 

 

맞춤 컨설팅같이 나한테 중요한 게 무엇인지 우선순위를 정해주셨다.

이미 실무한 경험이 있기때문에 UI/UX쪽으로 더 중요할 것 같다고.

내가 장점으로 말했던 끈기를 끄집어내셔서

요새는 끈기없는 사람이 많다며 그 점은 좋게 작용할 것이라고 하셨다. 깊게 사고하는 거라고!

커뮤니케이션을 잘한다고 내 입으로 말하긴했는데

그 분이 생각하시는 커뮤니케이션과 다른 것 같은 느낌이었다.

설득하고 말을 잘하는 그런 느낌을 생각하고계신 것 같아서 이건 나중에 커뮤니케이션의 기준을 물어봐야겠다.

 

그리고 단점이 느리다고했는데 추상적이라고 하셨다. 손이 느린건 단점이 될 수 있지만 처음 접한걸 느리게 학습한다는 것은 단점으로 보이지 않는다고 말씀하셨다. 사실 손이 느린 것도 많고 적응도 조금 느린것 같긴한데 잘은 모르겠다 ㅠㅠ 이 부분은 팀플을 하며 다시 쌓아가야할 부분인 것 같다..

회사에서 커뮤니케이션을 잘한다고 말하기위해서는 지금으로 많이 부족한 것 같다. 다시 멘탈 잡아야겠다 ㅠ

 

비전은 뚜렷해서 방향성 설정에 문제없다고 하셨고 전략이 명확하다고

다음에 만나면 그때는 전략을 짜보자고 하셨다.

그때는 전략과 관련된 질문들을 이것 저것 해봐야겠다.

 

사실 다 잘될거다~ 라고 하는 것보다

현실적으로 말씀해주신 점이 너무 도움되었다.

내가 생각한 목표까지 가기위해 노력하는 건 당연한거고, 거기까지 어떻게 가야하는지

전략을 아는 것이 중요한데 그것을 같이 고민하자! 라고 말씀하신 부분이 좋게 느껴졌다.

 

캠프에 있으면서 다들 하하호호 하는 분위기에 적응되고있었는데

사실 실무 분위기는 조금 더 냉담하긴하다.

나중에 어느 정도 그 분위기에 적응할 수 있도록

좀 더 긴장해야 할 필요가...있을 것 같다 ㅠ

 

---

04 WIL

📌지난 일주일 동안 가장 인상 깊었던 배움에는 뭐가 있었나요?

 

 

1) 안드로이드 뒤로가기엔 2가지 기능이 있다?

한 개는 일반적으로 생각하는 이전에 방문했던 페이지로 가는 기능이고,한 개는 하위 카테고리에서 상위 카테고리로 가는 기능이 있다는 것을 알았다.그냥 뒤로가기 기능 아닌가..? 싶었는데 사용자의 편의성을 고려해서 2개를 제작한 것 같다.

 

 

2) 디자인엔 정답이 없다

이론적으로 정답을 알려주는 것처럼 그렇게 보이지만

그 이론을 다 배우고 난 끝에 항상 강사님께서 하시는 말씀.

이것도 정답은 아니다~

😭

그 말이 이해는 갔다. 상황에 따라서 유연하게 판단해야할 필요는 어디에서든 존재한다!

 

 

3) 분석하는 방법 = 카타

카타를 하면 정말 좋아질까? 하는 의심이 있었다.

레퍼런스를 찾으며 그것을 분석하는 것만으로도 정말 사고를 기르는 것일까?

라는 .. 의심이 생겼었는데 한 번 하니까 계속 분석하고싶다는 생각ㅋㅋㅋㅋ

은근히 발견하는 재미도 있고 기획자/제작자가 왜 이렇게 했는지 풀리면

뿌듯한 마음도 느꼈다. 사실 이번주는 카타가 제일 재밌었다.

같이 하시는 튜터분이 잘 이끌어주셔서 그랬던 것이라 생각한다.

계속 하다보면 늘긴 하겠네! 라는 생각이 들었다.

 

나중에 회사가면 재밌게 느꼈던 일도 재밌게 못 느끼는 경우가 많으니

지금을 .... 즐기기로했다 ^...^

 

 

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

1)  원하는 회사에 들어가기위해 무엇을 해야하는지 스스로 정리해보자.

면담이 끝나고 어떻게 해야 원하는 회사에 들어갈 수 있을지 머릿속에 천천히 그림이 그려졌다.

큰 틀을 한 번 잡아보려고한다. 상담튜터의 말씀대로 여러가지 방법이 있는데

그 중 어떤 것이 나한테 베스트일지 생각할 필요가 있겠다.

명확한 건 아니지만 이 정도만 있어도 내 미래에 한 발 나아갔다고 생각한다.

앞으로가 많이 바쁘겠다... ㅠㅠ

 

 

2)  학습을 빨리 끝내려하지말고 제대로 '이해하기'

지금도 그러는 중이라 과제도 조금 느리게 진행하고있고

레퍼런스 분석(카타)도 하나 하나 뜯어보며 이해하려고 노력하고있다.

한 번 잘못배우면 다음엔 더 이해가 되지 않는다. 할 때 제대로 하는 게 중요하다!

느리더라도 확실히하고 넘어가는 태도는 중요하다.

나중에 아주 좋은 습관이 될 것 같다.