더블다이아몬드에 기반한 UX 이론과, Figma 사용 기초

오즈코딩스쿨의 11~12일차 리뷰를 작성해보고자 한다.

 

 

 

11일차 

-- IA/유저플로우/와이어플로우 

-- Grid & Spacing Rule

-- 와이어프레임의 역할

 

 

더블 다이아몬드 프로세스

 

 

현업에서 가장 많이 쓰는 더블 다이아몬드 프로세스를 배우면서 시작했다.

이전에 리메인커리어에서 프로젝트를 진행했을 때에도, 동일한 방식으로 개인 프로젝트를 진행해본 경험이 있다. 

 

Discover(발견) -- 데스크리서치에 해당한다. [발산]

  방안) SWOT, BM 분석, 경쟁사 조사, 시장현황 파악, VOC(Voice of Customers) 수집, 오픈 서베이, 기사 자료, 정량(Surver), 정성(IDI)

 

Define(도출) -- 문제상황 > 인사이트를 도출한다. [수렴]

  방안) 핵심타겟 정의 / Persona

 

Develop(구체화) -- 해결책을 구체화한다. [발산]

  방안) 가설설정, UX전략, Project Goal, 아이데이션 (HMW), 우선순위 설정 

 

Deliver(산출) -- 결과물을 산출한다. [수렴]

  방안) IA, User Flow Chart, mvp 화면 설계 (와이어프레임), 프로토타이핑, UT(검증 목적), 기대효과

 

 

 

 

I.A.  & 화면 설계서

 

 

다음으로는 Information Architecture 에 대해서 배웠다. 

IA 작성 방식에는 정답이 없다. 정말 많이 IA를 그려보았지만, 구조가 비교적 명확한 서비스가 있는가하면, 허브들이 많은 앱도 있어서 유의 해야 하는 부분 같다. 실무에서는 구글 시트를 활용해 3~4 Depth까지 작성한다.

오늘은 오즈코딩스쿨에서 배운대로 IA의 작성방식을 정리해보겠다.

 

 

1. Main Category : 바텀 내비게이션 (하단 독바)를 메인 카테고리로 설정

2. Sub Category : 메인 화면에 보여지는 정보를 서브 카테고리로 설정

3. Depth : 서브 카테고리에서 페이지로 넘어가는 부분 

 + 공통 영역 : 검색, 알림 등 동일한 기능

이런 형식

 

리메인커리어에서 배웠을 때 엑셀 시트로 화면 설계서를 작성하는 법을 배웠었는데, 이때는 화면에 보이는 요소들 하나 하나를 엑셀에 기재하였었다. 개발과의 협업을 염두했을 때 좀 더 기능적으로 앱을 보아야 하고, 포트폴리오에 실고자 하는 목적이라면 더 중요한 부분을 위주로 한 IA 작성이 시각화에 좋을 것 같다.

 

직접 IA를 그려보는 실습도 진행해보았는데, 나는 네이버 지도를 선택했다. 

네이버 지도의 경우 하단 탭에 나와있는 게 주요 기능보다는 탐색에 전부 치중이 되어 있어서, 작성하는데 어려움이 있었던 것 같다.

 

 

 

User Flow

 

사용자가 Task(작업)을 완료하는 것을 기준으로 했을 때의 이용 경험을 중점적으로 본다.

즉, 서비스 내의 움직이는 경로를 설계한다.

 

-- 사용자 시나리오보다 구체적이다.

-- UI, 행동, 판단으로 표현한다.

 

 

구성 요소는 다음과 같다.

1. 목표 -- User goal 

2. 작업 -- Task

3. UI 

4. 행동 -- 사용자가 작업을 완료하기 위해 UI 상에 보이는 

5. 판단

 

 

 

 

추후 학습 계획 기록)

 

        개인프로젝트 중인 어플로 화면 설계서 그리는 연습 하기

 

 

 

 

12일차 -- 오토레이아웃

 

 

[1] Resizing Min/Max

-- 피그마에서 Min/Max 값을 설정 시, 주황색 가이드선이 나온다. 이를 통해 반응형 디자인을 구현할 수 있다. 

 

 

[2] Ignore Auto Layout

-- 오토 레이아웃의 정렬을 무시한 뱃지(ui 요소) 등에 쓰인다. 

 

 

 

새롭게 배운 점

반응형 디자인에 사용되는 min / max 값을 설정하는 법을 배웠다. 다양한 디바이스에 대응하려면 필수적인 기능일 것 같다.

또한 네이밍 센스나, 오토레이아웃을 씌우는 순서를 차근차근 배울 수 있어 좋았다. 내부 콘텐츠를 먼저 배치한 뒤 오토레이아웃을 씌우고, 그 뒤에 fill 값을 씌워야 두 번 일하지 않는 것 같다. (기존에는 공백의 구간만큼 rectangle로 먼저 잡아놓고 시작했는데 그 작업방식이 생각보다 불편하다는 걸 깨달았다.)

 

 

 

어려웠던 점

작업 속도가 나지 않아서, 단축키를 외워야 할 것 같다.

 

 

[단축키] 콘텐츠 편집

• text 크기: ctrl + shift + [<] [>]
• 두 물체 가운데로 정렬 : alt + H / alt + V
• 작업 바 on/off : [`]
• 스포이드 : [i]     생각보다 계속 까먹고, 색을 일일히 마우스로 찍는데 시간 소요가 많이 된다

 

[단축키] 캔버스 이동

• shift + 스크롤 : 가로로 이동
• ctrl + 스크롤 : 확대 축소
• space + 스크롤 : 세로로 이동
• shift + [←]/[→] : 가로/세로로 빠른 이동
• ctrl + [+]/[ - ] : 확대 축소

 

 

실습 진행

 

클론 디자인과, 카드 만들기 실습을 진행했다.

클론 디자인

 

실습 레이어