4 day 2024.05.16.

17. 중간점검: 고객 경험을 만드는 PM 전략 (4)

11. 디자이너와 협업하기

 

1) 색상(Color)

주요 색상 (Primary Color / Service Identity Color)

• 정의: 브랜드를 빠르게 식별하고 상징적으로 인식할 수 있게 돕는 색상입니다.
• 동의어: 메인컬러(Main Color), 키 컬러(Key Color), 브랜드 컬러(Brand Color)
• 예시: 네이버의 경우 초록색은 시각적으로 강조되며, 콘텐츠의 강약을 구분할 수 있게 합니다.

색상 구분

·         주제색 (Primary Color): 그린색

·         브랜드의 주요 이미지와 연관된 색상으로, 가장 대표적으로 사용되는 색입니다.

·         강조색 (Accent Color): 주황색

·         주제색을 보완하고, 특정 요소나 정보를 강조하기 위해 사용되는 색상입니다.

·         배경색 (BackGround Color): 흰색

·         전체적인 디자인의 배경으로 사용되는 색상으로, 주로 안정감을 주고 다른 색상과의 조화를 이루기 위해 사용됩니다.

·         보조색 (Sub Color): 진회색

·         주제색과 강조색을 보왅하며, 디자인의 다양성을 추가하기 위해 사용되는 색상입니다.

 

2) GUI 디자인 가이드라인 (Graphical User Interface)

가이드라인 목적

• 전체적으로 일관성을 유지하기 위해
• 전체 스타일을 맞추기 위해
• 브랜드 컬러 가이드 구축을 위해

 

가이드라인의 핵심 요소

• 컬러 팔레트 (Color Pallet): 컬러에 대한 정의
• 타이포그래피 (Typography): 텍스트에 대한 정의
• 레이아웃 가이드라인, UI 가이드라인, 아이콘 스타일 정의: 레이아웃 간격, 이미지 크기, 버튼 비활성/활성화 요소 등

 

가이드라인 작성에 대한 고려사항

• 과거에는 가이드라인을 만드는 데 많은 시간이 소요되었고, 사람이 직접 작업하기 때문에 오류가 발생했었습니다.
• 가이드라인 작성 도구는 과거에는 포토샵이나 파워포인트가 사용되었지만, 현재는 '스케치', '피그마'와 같은 가벼운 벡터 디자인 도구와 '제플린'과 같은 파일 전송 도구가 사용되고 있습니다.

 

 

3) 디자인 시스템(Design System)

해외 대표적인 가이드

1. Material Design Guideline (구글)
2. Human Interface Guideline (iOS)

 

국내 대표적인 가이드

1. TDS (Toss Design System)

 

목적

• OS를 사용하는 환경에 맞춰서, OS에 설치되는 프로그램들이 규칙을 지켜서 디자인하거나 사용 환경을 제공
• 일관성 있게 사용자들이 사용할 수 있는 환경 제공
• 브랜드마다 Identity를 담기 위해 디자인 시스템 가이드라인 정의

 

구성요소

1. 디자인
2. 사용자 인터페이스 (무빙, 구성요소)
3. 반응형 화면에서 어떻게 변화되는지?

 

디자인 시스템의 종류

1. Style Guide
2. Component Library

 

디자인 시스템이 필요한 이유

1. 효율성 증대
2. 일관된 UI
3. 생산성

 

결과

• 기획, 디자인, 개발 생산성 향상 및 비용 절감
• 일관된 브랜드 정체성과 높은 사용성 유지
• 기존 가이드 요소들을 따르므로 빠르고 효율적인 업데이트 가능

 

적용 예시: 카카오페이

• 하나의 서비스지만 다양한 카테고리 보유 (결제, 송금, 한 눈에 확인, 투자 등)
• 각 카테고리별로 디자이너 상이
• 공통된 페이지 디자인을 위해 디자인, 컴포넌트의 가이드를 따를 경우, 통일성/일관된 디자인 및 간편하게 적용 가능하여 에너지/시간 절약
• 서비스 확장 시, 가이드에 따라 통일성 있는 디자인 적용 가능

 

비유

• 디자인 시스템 = 레고 블록: 각각의 요소를 조합하여 '하나의 결과물' 생성

 

 

4) 이미지 파일 종류와 특성

1. 이미지 파일의 손실 여부에 따른 분류:

 

1. 이미지 파일의 컬러 팔레트 종류에 따른 분류:

파일	BMP	GIF	JPEG	PNG	SVG
비	Window4, 초기 App에서 사용한 파일	움직이는 애니메이션 / 뒷 배경 투명	일반적으로 사진을 촬영하고 저장	투명처리 가능(배너)	최근 각광받은 파일로, 반응형 웹/App페이지에 적합
속성	Lossless Indexed / Direct	Lossless Indexed Color	Lossy Direct Color	Lossless Direct Color	Lossless Vector
	Pixel로 구성				Vector로 라인&곡선 구성 (스케치, 피그마에서 구현 가능)
특징	- Bit들의 Map으로 아주 오래된 파일 형태 - 파일 사이즈가 큼 -Pix	- 무손실 압축방식 -최대 256가지 색상만 사용 - 파일 사이즈는 BMP보다 작음 - 컬러표현이 한정되어 있어 깨져보일 수 있음	- 인간의 눈으로 확인할 수 없는 부분을 제거한 손실압축방식 - 수천가지의 팔레트 보유	- 무손실 압축방식 - 수천가지의 팔레트 보유 - GIF,JPEG 파일보다 파일 사이즈가 큼	- 무손실 압축파일 - 벡터형식으로(Vector) 8사이즈를 키워드 깨짐 현상 X - 픽셀 대신, 라인과 곡선으로 이루어짐 - 파일사이즈는 작은편 (디지털 복잡도에 따라 다름)
활용	- 윈도우프로그램이나 초기 Application에서 사용 - But 최근에는 잘 사용하지 않음	- 애니메이션 투명한 것을 표현 가능 -로고 / 선을 그리는 것에 적합	- 적은 파일 사이즈와 좋은 퀄리티 표현 (단, 반복 저장하면 품질이 낮아짐) - 사진 or 그라데이션 표현에 좋음	- Alpha Transparency 지원 (일부 영역 투명처리 가능) - 아이콘, 배너같은 영역에 파일 활	- 애니메션 적용도 가능 - 다양한 해상도 대응에 적합 - 단, Flat&Simple Design 결과물에 적합 (선으로 구성되어 단순한 디자인 적합)

- (출처) 비트맵(Bitmap) vs 벡터(Vector)이미지란 무엇인가?

 

 

5) Affordance

Affordance 정의:

1. 좋은 Affordance 사례:

사례 1: 제품을 보는 것만으로도 그 사용 방법을 쉽게 인지할 수 있는 경우.

출처: zero-base Corp.

사례 2: 사용자가 특정 조건을 만족하면 버튼이 활성화 되어, 사용자의 행동을 유도하는 디자인.

출처: zero-base Corp.

1. 안 좋은 Affordance 사례:

사례 1: 모든 필요한 항목들을 작성하고 완료했음에도 불구하고, [결제]나 [취소] 버튼이 비활성화되어 사용자에게 혼란을 주는 경우.

출처: zero-base Corp.

• 사례 2: 어떤 버튼을 눌러야 하는지, 그리고 그 버튼이 어떤 기능을 하는지 사용자가 명확하게 구분하기 어려운 디자인.

출처: zero-base Corp.

 

 

 

 

6) 디자이너와 협업

디자이너와 협업을 위한 단계별 지침:

1. 요구사항 전달
2. 디자인과 개발 사이의 조율
3. 시스템 상황 변경 표현
4. 경청과 협의

 

 

 

13. 모바일 플랫폼 가이드 라인

 

1) 각 가이드에는 어떤 내용이 담겨 있나요?

1. 모바일 플랫폼 가이드라인 종류
2. 각 가이드라인에 포함된 내용

 

2) 왜 구글/iOS GuideLine을 따라야 하는지? 차이점은?

• 신규 App을 출시 했을 때,  Android / Apple를 적용해야하기 때문에 

• Guide 그대로 따를 경우, 개발 하는 시간/비용 절약을 할 수 있기 때문에 

• Android / iOS의 Default Button 상이: Android는 이전,홈,최근 메뉴를 버튼 제공 / iOS는 홈버튼만 노출

출처: zero-base Corp.

-       Android - Show and Hide Button / Recents Button / Home Button / Back Button

-       iOS - 화면 상단 좌측에 [<]이전페이지 버튼 or [엣지 스와이트]로 설정

 

• Android / iOS의 Navigation 차이점

출처: zero-base Corp.

출처: zero-base Corp.

-       각 OS 환경에 맞게, 서비스 반영

 

• Android / iOS의 UI Control 차이점 (Call to Action) (Title/이전버튼)

출처: zero-base Corp.

-       Android - FAB(Floating Action Button) 우측하단에 설정, Search버튼은 상단에 설정

iOS - [+] 추가되는 버튼은 우측 상단에 설정, Search버튼은 하단에 설정

출처: zero-base Corp.

-       Android -이전버튼 [←], 타이틀은 [좌측정렬]

-       iOS -  이전버튼 [<], 이전버튼 클릭시 무엇이 보여지는지 타이틀 보여, 타이틀은 [중앙정렬]

 

• Android/ iOS의 Visual Design 차이점 (레이아웃/아이콘)

- 공유버튼: Android(꺽쇠모양은 점3개) / iOS(박스에 out 화살표)

- Dialog Text Alignment: Android(타이틀은 좌측 정렬/의사결정하는 버튼은 오른쪽(사용자의 오른손 多) / iOS(텍스트는 가운데 정렬/버튼도 가운데 정렬) 

- Dialog Text Alignment 알림창: 창 닫기로 [X] 적용하지 않고, 버튼 2가지로 적용 [Cancel / Accept]

출처: zero-base Corp.

 

-       Android - 타이틀(좌측), 이미지(Depth와 깊이감이 있게 그림자 효과), 아이콘(채워진 모양)

-       iOS - 타이틀(중앙), 이미지 (모노톤으로 적용), 아이콘(라인만)

 

• Android / iOS의 Motion 차이점 (Page Refresh)

-       Loading Page: Android(타이틀 밑에서 리플레시가 노출/사라짐) /  iOS(타이틀&컨텐츠 모두 내려가고, 맨 앞에서 로딩바)

 

3) 모바일 플랫폼 가이드라인

- 왜 OS(Operating System) 표준 가이드라인을 알고 있어야 하는가?

① 익숙한 사용환경: 사용자 측면에서 이미 익숙한 레이아웃에서 사용가능

② 개발 효율성: 디자인&개발자들은 공통된 가이드라인에 따라, (오픈 리소스)를 적용하므로 간편/효율성 + 접근성 가이드라인 준수할 수 있음

③ 시간 절약: 모든 Component 숙지의 어려움, 인지하는 과정 모두 시간 절약

④ 마켓 등록 거절 사유가 될 수 있음: 거절 후, 개선해서 반영되는 시간소요 발생