[19.06.28] 오픈패스_6일차_GUI

Ice Breaking

무드보드를 참고할 만한 Site

Case Study : Airbnb

 

에어비앤비의 핵심 키워드 : Live (여행은 살아보는 거야)

 

Don't go there, Live there 

유적지 이미지를 사용하는게 아니라, 사람 / 무보정 / 움직이는 촬영 화면 등 자연스러움을 부각. 

리얼함 / 살아 있는 느낌을 전달하기 위함

 

People + Place + Love + Airbnb

 

Blong / connect / share / anywhere / 

 

Moving Brand

create.airbnb.com 에서 확인해볼 것

 

컬러 : 외부인이 자기 집처럼 느끼도록 코랄류 컬러를 선택

여행하면서 가장 기억에 남았던 시간이 '개와 늑대의 시간', 해가 지면서 보이는 코랄빛의 컬러가 가장 인상이 깊었다. 

 

상태 변화를 에메랄드 그린으로 표현하면서, 사용자에게 어떤 단계에 있는지 알림

코랄 컬러는 CTA와 같은 중요한 버튼에만 사용했다는 점을 주목

예를 들어 패션 코드가 레드라고 하면 보통 무채색 계열의 옷을 입고 레드 악세서리를 착용하는 것처럼 포인트만 강조한다.

 

왜 에메랄드 그린을 썼는가?

코랄색의 보색이기 때문. 물론 완벽한 보색 대비를 완벽히 맞춘건 아니고, 부분적으로 바꿔서 사용했다.

 

고민해야 하는 지점

"내 컨셉을 어떻게 이미지 / 컬러로 입히지?"

 

---

이미지

서비스 컨셉 / 의미를 가장 직관적으로 표현 가능한 수단

 

이미지화할 때 각자가 생각하는 바가 다르다는 점을 알 수 있었다.

같은 키워드라도 사람마다 그를 표현하는 방식이 다르다.

 

무드보드를 만들 때 동일한 Look and Feel을 묶어서 만들어야 한다.

그 이유는 그 목적이 커뮤니케이션에 있기 때문이다. 

 

이미지의 정보 측면

1. Vector / Bitmap

 

2. Format / Size

JPG는 압축배너류에서 아직 사용 :) 

PNG 무손실 압축 (1회 압축하면 추가 압축이 불가능)

나인패치

이미지를 PNG로 내보낼건지, SVG로 내보낼건지는 개발자와 커뮤니케이션을 통해 해결! :) 

안드로이드는 최소한 3개 많게는 6개까지 베리에이션을 해야 한다. iOS는 x1, x2, x3 세 개! 

 

3. Aspect Ratio / Rule

이미지를 쓸 때 특정한 비율을 지켜줘야 한다는 약속

1:1, 2:3, 3:4, 9:16... 이 4개가 가장 많이 사용

특정 카드 안에 이미지 비율은 동일하게 지켜줘야 한다. 

ex. 에어비앤비는 메인 페이지에서 4:3, 상세 페이지에서 4:3, 저장 목록에서도 4:3으로 만들었다.

 

가장 큰 이유는 개발 효율 측면. 일일히 계산해서 대응할 여유가 없다.

그리고 사용자도 불편하다고 느낄 수 있다.

초보자에게 가장 좋은 비율은 1:1로! 인스타그램 Ratio를 참고! 

만약 사진을 촬영했을 때도, 1:1 Frame을 사용자에게 보여줘야 하고, 짤리는 영역도 명확히 알려주어야 한다.

 

이미지 명칭 작성법

카테고리 분류_타입구분_상태표시_번호(선택 사항)_옵션(선택 사항).PNG

 

룰을 결정하고 그 방식대로 이름을 정하는 것을 훈련하자! 

 

파일 이름을 작성할 때 R/R을 명시! 

이미지 / 컴포넌트 / 스크린 / 컬러 / 폰트 이름 규칙을 먼저 정하는게 진짜진짜진짜 중요! 

 

Tip. 이미지 구하는 법

구글링할 때 팁! 

오브젝트를 찾을 때는 아래와 같이 찾아서 모아두는 습관을 가지자 :) 

이미지 키워드 + Perspective

(ex. coffee cup top view)

 

이미지를 찾을 때 RF인지 RM인지를 파악하는게 진짜 중요하다

사용 용도에 따라 가격이 달라진다.

RF (Royalty - Free) - 게티이미지가 저작권 소유 (작가가 넘긴 경우)

RM (Royalty - Managed) - 작가가 저작권 소유 (게티가 로얄티 지급) 

이미지를 쓸 때도 RM는 피하자! 

 

직접 촬영!

서비스 컨셉에 맞게 사진을 찍는 것도 정성! 포트폴리오에 넣었을 때 차별화 요소가 된다.

 

컬러

컬러는 단기 기억에서 장기 기억으로 빠르게 넘어가는 특성이 있다.

 

컬러 별 특징

1. 빨강색 : Bold / Passion / Love / Speed 스피드를 나타내는 경우가 많다.

만약 Red가 Primary color일 경우 에러 메시지 컬러는 어떻게 써야하는가? 라는 질문에 색을 반전시키길 권한다. border를 빨강 폰트를 검정 식으로 :) 

 

2. 주황색 : CTA 컬러(행동을 유발하는) 

집에 가서 게임 광고 / 배너 등을 보면서 오렌지 컬러를 관찰해보기! 

 

3. 노랑색 : Communication 

노랑을 메인 컬러로 사용하려면 브라운 / 아이보리를 베이직으로 깔고, 포인트에만 노랑색을 사용하자!

 

4. 초록색 : Harmony / Universal 

 

5. 파랑색 : Fresh

신규 서비스에서 반 이상이 블루로 만들어진다는 소문이 있을 정도로 많이 사용한다.

낮의 파랑 : 신선함 / 시원함, 밤의 파랑 : 진지, 집중 

신뢰가 가는 키워드에서 많이 사용된다.

주의할 점은 프러시안 블루는 묵직함 / 민트 계열은 밝은 느낌

 

6. 보라색 : Unique / VIP / Healing 

유일하게 자연에서 추출할 수 없는 컬러. 달팽이 진액에서 추출!

 

Reference

1. brandcolors.net

 

컬러의 정보 측면 (Color Mode)

RGB / CMYK / HSB / HSL 

 

1. RGB : 빛의 삼원색

Fure White / Black 은 배터리 절약 / 촌스러운 대비를 막기 위해 모바일에서 잘 사용하지 않는다.

iOS와 안드로이드에서 색을 해석하는 체계가 다르다. 

특히 초록색이 그 차이가 명확하기 때문에, 주의해서 OS별로 적용해가면서 만들어야 한다.

 

색을 전달할 때, 규칙을 통해 말하는 습관을 들이자.

ex. 빨강색을 말할 때도 (255, 99, 71) or #FF6347으로 전달! 대부분 Hex code로 전달한다.

 

동일한 6자리 숫자면 무채색이 나온다 (R = G = B -> 무채색)

밝을수록 그 숫자 값이 높아진다.

 

코드만 보고도 어떤 색이 나올 지 파악해야 한다. Picker를 이용해 컬러를 바꾸는 것은 초보!

예를 FFFF00이 노란색이고 주황색을 만드려면 FF6600을 만드면

 

마젠타 색만 물감 혼합 규칙을 따르고, 다른 색은 고유 혼합 규칙을 따른다.

Yellow : FFFF00

Cyan : 00FFFF

 

FF 두자리 수에서 앞자리를 내리면 16씩 내려간다. 뒷자리는 한자리 씩 내려간다. 16진수이기 때문에!

Material Design Guideline 컬러 팔레트보고 연습하기!!

 

2. CMYK : 물감 혼합

팬톤 참고 :) 

 

3. HSB / HSL 

HSB이란? Hue, Saturation, Brightness

HSL : Hue, Saturation, Light

 

왜 UI에서 HSB / HSL이 중요한가?

예를 들어 버튼의 컬러를 상태값(호버, 클릭 등)에 따라 변경해야 하는데 

그 전에는 Picker를 '감'으로 움직여서 조절했다.

 

하지만 안드로이드 같은 경우, 유저가 색을 바꿀 수 있기 때문에 True color 1600만개 경우의 수로 변경할 수 있다는 결론이 나온다.

즉, 컬러 변경 시의 Logic를 짜두지 않으면 그 경우의 수를 대응할 수 없다.

 

그래서 Hue를 통해 색을 바꾸고, Saturation과 Brightness로 밝음 / 어두움 를 정의해주어야 한다.

HSB (360, 100, 100)이면 RED이고, 밝게는 360, 50, 100)과 같이 적용해야 한다.

 

하지만 애초에 S값이 50이하인 경우면 어떻게 하는가? 라는 문제가 제기되면, 그 경우도 일일히 정의해주어야 한다.

 

Color Combination

주변의 색상은 어울리게 사용하고, 강조하기 위해서는 보색을 사용한다. 

빨강(360도)이라면 +- 60도까지 주변색이라고 부른다. 

보색은 180도가 아니라, 살짝 각도를 바꿔서 사용한다. 

 

1차 분류

Warm or Cool color

쿨컬러로 만들 때, 무지개 순서대로 컬러를 사용하는건 금물. 뻔하기 때문!

유사색을 사용할 경우 순서를 바꾸거나 중간 단계를 건너뛰거나 하는 식의 장치가 필요하다.

 

바리에이션은 Light / Dark 버전을 최우선으로 만들어야 한다

 

Background / Surface color를 개념을 명확히 구분해서 사용한다.

Background : F1F1F1 / F7F7F7 / FAFAFA

Surface : FFFFFF + 쉐도우 + 투명도 

ex. dialogs가 surface 그 배경이 background

 

에러컬러는 꼭 지정하고 가기! :) 가이드라인에 규정된 컬러를 참고해도 좋다.

특히 Primary color가 따듯할 경우 더욱 유의!

 

어도비 Color Wheel같은 툴은 지양할 것! 

 

숙제_1

다른 서비스 UI가 채택하고 있는 스트럭처 2-3개 보고 오기!

 

Typography

Type Classification 

1. Serif #고급진 #클래식한

2. Sans - Serif #명확한 #또렷한 #신뢰가 가는

 

숙제_2

서비스와 일치한다고 생각하는 폰트를 골라오기!

물론 기본 시스템 폰트는 안드 - Roboto, iOS - SF 이지만

제목, 본문 등 브랜드를 만들 때 사용할 폰트를 고르는 것! :) 

 

1. serif or sans 고르기

2. 폰트 고르기

3. Weight / 자간 테스트 하자! 

 

숙제 팁! 

서체 Weight를 다르게 만들 때 가장 어려워 한다.

Naver, 루이비통 로고 차이를 예로 들 때

자간, Weight에 따라 느낌이 주로 차이가 난다.

 

무거운, 단단한 Black - 네이버

가볍지만 무게감도 있는 Medium, Regular - 루이비통

 

자간이 좁으면 스피드감 도 올라간다. ex. 네이버는 검색엔진이므로 자간이 높다

넓으면 여유있는 느낌이 생긴다. ex. 명품 브랜드는 보통 자간이 넓다. 

 

숙제_3

1. Primary Color 

2. Secondary Color

3. Error Color

 

자기만의 3가지 종류 컬러 코드를 정하고 고른 이유를 함께 가져온다! 

 

팀 별 논의

1. 우리 서비스에 맞는 컬러는 무엇인가? 

 

컬러를 찾을 때 방식! :) 

1. 무드보드에서 추출

2. 브랜드 별로 검색!