ⓅⒶⓇⓉ ①③ 5주차 학습일지 첫번째 | UI 디자인 기초강의 | Chapter 1-1 ~ 1-5 | Chapter 2-1 ~ 2-8

 

📋 오늘의 할 일 📋

💻 UI 디자인 기초강의 | Chapter 1-1 ~ 1-5

💻 UI 디자인 기초강의 | Chapter 2-1 ~ 2-8

 

 

---

 

 

💻 UI 디자인 기초강의 | Chapter 1-1 ~ 1-5

 

⚡️Design Process

 

➀ Double Diamond

∗ 어떤 분야의 디자인에서건 거치게 되는 디자인 프로세스 단계들을 일반화하고 체계화한 모델

 

❶ Discover (접근)

고객 경험 리서치를 통한 문제를 설정, 사용자 경험을 조사하고 분석, 핵심 고객 설정, 고객 관찰, 고객 체험, 인터뷰 등을 사용한다. 사용자 경험을 높이기 위해 기획과 디자인을 하게 된다. 

❷ Define (발견)

자료 분석 및 디자인 방향을 설정. 디자인을 제안하는 단계로 가상 고객을 설정 (퍼소나), 고객 여정맵 (저니맵), 핵심 욕구 도출, 서비스 컨셉 도출 등을 사용한다.

❸ Develop (해석 구체화)

세부 해결 방안을 구상, 정보에 대한 구조도를 작성해야 하며, 프로토타입을 만들어야 한다.

❹ Deliver (아이디어 제안 & 해결책 도출 실행)

적용 및 수렴의 단계, 실행 계획을 수립, 

 

② Stanford’s d.school

∗ 명확하게 정리되지 않은 사용자의 니즈를 이해하고, 해결할 수 있는 기회를 얻기 위해 공감적 태도를 활용한다.

∗ 복잡한 문제에 대한 논리 추론적 접근법.

∗ 공감, 정의, 아이디어, 프로토타입, 테스트 다섯 개의 단계로 이루어져 있다.

 

③ Google Design Sprint

∗ 프로세스는 아니지만 업무 방식 중 하나.

 

④ Waterfall Model

∗ 기획, 디자인, 개발 이후 테스트를 진행하고, 해당 단계에서 문제가 발생 시 기획부터 다시 돌아가서 새로 시작한다.

∗ Agile model

 

 

⚡️Why How What

∗ 디자인만 벤치마킹 해서는 프로젝트를 진행하기 힘들다. 컨셉이라고 하는 논리의 힘이 부족해지기 때문에 논리적으로 맥락적인 디자인의 흐름을 만드는 것 역시 약해지기 때문이다. 그러므로 방법론의 도움을 받아 디자인을 도출해내야 한다.

 

📌 Why

➀ Kick off (수행준비)

∗ TFT 구성 → 프로젝트 승인 → 내부 킥오프 → 고객 자료 수집 요청 (정책서, brand asset)

Request Profiling (요구사항 분석/진단)	고객요구 기초 분석 → 브랜딩 요구사항 분석 → 서비스/정책수립 요구사항 분석 → 디자인 요구사항 분석 → 고객 TF 인터뷰 → 분석/진단 종합(KPI/Goal의 이해) → 예상 리스크 진단/정의 → 이슈 프로젝트 범위 정의
Request Define	프로젝트 요구사항 정의
Project Planning (수행계획 수립)	프로젝트 프레임웍 설계 → WBS 수립 및 검토의견 수렴

 

➁ Discover = Desk Research

Desk Research Framework	분석 프레임웍 설계 → As-Is brand 분석 → As-Is 채널 분석 (PC/Mobile) → As-Is Contents 분석 (콘텐츠 종류/양식/형상) → 경쟁/유사업계 Brand 분석 → 경쟁/유사업계 Channel 분석 (PC/Mobile) → 경쟁/유사 업계 UX 분석 (서비스/GUI) → 트렌드 분석
Insight Clustering (Co-creation)	데스크리서치 수렴 워크샵
Direction Modeling (To-be 방향성 수립)	Brand SWOT & ERRC → GUI SWOT & ERRC → Positioning Map (Brand) → Image map / Moodboard (Brand) → 최상위 키워드 도출
Concept Sketch	To-be outline & concept

 

③ Define = Modeling

VX Modeling (시각화 경험 정의)	Metaphor → Color →Typography → Icon → Graphic
Design Strategy (디자인 전략 수립)	Design Strategy→ Concept Making
전략 보고	중간 보고

 

④ Define = Core Design

GUI Design-Core (기본 디자인)	Icon 가이드 디자인 정리 → 프로모션 가이드 디자인 정리 → Basic Style Guide 정리
Interaction Design-Core (인터렉션 디자인)	아이콘, 프로모션 모션 인터렉션 샘플
디자인 보고
종료보고 (Icon/프로모션 가이드, 인터랙션 모션 샘플)

 

⑤ Deliver

산출물 정리	디자인 산출물 정리 - 프로젝트 내 GUI Style Guide 정리
교육 및 인수인계	산출물 이관 - 교육 및 인수인계
검수 확인	검수확인서 작성 및 확인
회고
종료
프로젝트 종료

 

📌 How 

➀ As-Is 브랜드 분석 (브랜드에 대한 이해 기반의 아이데이션, 전략 수립, 방향 정의)

∗ 이미지 캡쳐 시 분석하고 분석한 내용을 정리해서 무조건 문서화 해서 협업하기 좋게 만들어야 한다.

➁ As-Is 콘텐츠, 분석 (현재 콘텐츠와 기능을 이해하여, 더욱 고도화된 디자인을 가능하게 한다 = 형태는 기능을 따른다.)

③ 경쟁/유사 콘텐츠 분석 (경쟁/유사 업체는 어떤 콘텐츠와 기능들을 사용하는지 이해하고, 좋은 콘텐츠와 기능들을 수집)

∗ 차별점은 좋은 것과 좋지 않은 것으로 분류해둔다.

④ As-Is 디자인 분석 (현재 디자인의 장단을 진단하고 솔루션을 정의한다.

∗ 앞에서 As-is 브랜드 분석을 진행하면서 자연스럽게 디자인도 함께 분석을 하게 되겠지만 이후 협업을 위해 문서로 따로 작업해둔다.

∗ Design Essense 개선 : 디자인 요소를 최소화함으로써 디자인을 단순명확하게 유지하고, 사용자가 쉽고 빠르게 정보에 집중할 수 있도록 한다.

∗ Color system 개선 : 브랜드 아이덴티티 컬러 사용으로 현재 브랜드에 속해 있음을 느끼게 한다. 

∗ 구분에 따른 각 컬러별 명확한 규칙 적용으로 쉽게 인지하고 집중할 수 있도록 한다.

⑤ 경쟁/유사 디자인 분석 (타사의 장단점을 진단, 업계의 디자인 수위 분석)

⑥ 브랜드 포지셔닝 맵

∗ 디자인을 통해 브랜드를 사용자와 고객에게 어느 정도 포지션에서 보이게 하여 그 상황에서 커뮤니케이션할 것인지도 문서화를 진행하기도 한다.

⑦ 이미지맵 / 무드보드

∗ 유사한 톤을 일관되게 보여줌으로써 룩앤필에 대한 공감대를 형성

⑧ GUI

∗ 디자인을 위한 리소스, 영감자료 수집단계 / 협업 및 공유를 위해 문서화 지향

⑨ 전략, 방향 수립

∗ 지금까지의 준비를 정리하여 현업에 우리의 전략과 방향을 설명한다.

공감할 수 없는 결과를 얻었을 때에는 해당 과정을 재실행, 재검증, 재공감하는 태스크를 반복한다.

 

⚡️ Visual Define

∗ 비주얼 정하기 전에 프로젝트의 목표를 명확히 알아야 한다.

➀ 개념적인 측면 : 철학이나 가치를 시각화 하는 부분

➁ 형태적인 측면 : 해당 브랜드의 로고의 형태나 서비스, 플랫폼에서 사용해야 하는 어떤 형태 

③ 가치나 의미 기준으로 수집한 자료들을 바탕으로 여러 사람들이 모여서 논의하고 협의를 통해 방향성을 설정하고 시안을 제작한다.

 

 

 

 

---

 

 

 

 

💻 UI 디자인 기초 강의 | Chapter 2-1 ~ 2-8

 

⚡️디자인 환경

 

∗ Dp? : 해상도마다 디자인이 다르게 출력되는 것을 방지하기 위한 개념, 밀도 차이를 표시

∗ 화면의 구성요소들의 크기나 배치를 할 때 기기의 물리적인 디스플레이 해상도에 영향을 받지 않고 독립적으로 크기를 지정할 수 있도록 하는 가상적 화소의 단위 160DPI의 디스플레이 해상도를 기준으로 한다.

∗ 360*640이 가장 많이 사용되는 화면의 크기

0.75x (low-density) [1dpi] = ~ 120dpi

1.0x (medium-density) [mdpi] = ~ 160dpi → 표준, 100%

1.5x (high-density) [hdpi] = ~ 240dpi

2.0x (extra-high-density) [xdpi] = ~ 320dpi

3.0x (extra-extra-high-density) [xxdpi] = ~ 480dpi

4.0x (extra-extra-extra-extra-high-density) [xxxdpi] = ~ 640dpi

∗ ex) Dpi 360*640 > xhdpi 720*1280

 

 

⚡️컬러시스템

∗ Background → #fafafa / Surface → #ffffff 로 구분해서 사용하는 경우도 있음

∗ Inactive, Activated, Error, Disabled 상태에 따라서 컬러를 정의할 것

∗ 특히 Primary Color나 Secondary Color 가 레드 계열일 경우 Error 컬러와 혼동이 없도록 할 것

 

 

⚡️타이포그래피

∗ 자신만의 규칙을 적용해서 정리할 것.

∗ 가장 작은 Body 내의 타이포 크기가 14 밑으로 내려가지 말 것.

 

 

⚡️아이콘

 

➀ 앱아이콘

∗ 기기별로 아이콘의 크기는 다르다

iPhone	180px*108px (60pt*60pt @3x)
	120px*120px (60pt*60pt @2x)
iPad Pro	167px*167px (83.5pt*83.5pt @2x)
Pad, iPad mini	152px*152px (76pt*76pt @2x
App Store	1024px*1024px (1024pt * 1024px @1x)

 

➁ 시스템아이콘

∗ 준수하면 좋은 혹은 권장되는 좋은 사이즈가 있다

∗ 염두해 두어야 할 규칙 

❶ icon layout : 사이즈, 안에 내용물이 다르다고 한들 규정된 사이즈로 제작하여야 나중에 디자인하기 쉽다. (24*24px or 20*20px)

❷ 여유공간은 48*48px 로 작업. 터치 영역을 생각하기 

❸ icon grid & keyline : keyline은 그리드의 기초, 일관된 시각적 비율을 유지할 수 있다. 

❹ icon style : line, fill, color 세 종류를 가장 많이 사용한다. 

❺ icon stroke : 기본적으로 2px의 stroke를 유지하고있다.