UI Design Guide

TOP BAR Guide상단 바 가이드

Full Pop-up Guide풀 팝업 가이드

Flicking Banner Guide플리킹 띠배너 가이드

#드롭다운 #드롭다운메뉴 #드롭메뉴 #드롭버튼 #드롭

#텍스트필드 #텍스트 #텍스트폼 #텍스트에어리어 #인풋 #인풋폼 #텍스트입력

Common UI Elements Guide체크박스 & 라디오 버튼

Sub Button Guide보조 버튼 가이드

Main Button Guide메인 버튼 가이드

Tab Guide 탭 가이드

Fonts Guide (Online)폰트 가이드 폰트 기본 세팅 전사 기본 서체 : 집더함체 이벤트 / 기획전 타이틀 및 컨텐츠에 사용 온라인 UI 서체 : 산돌 네오고딕1 온라인 UI 가이드 및 디자인 시 가독성이 필요할 때 사용 * DP = SP =2PX(PT) 포토샵 작업시 ×2로 변환 - 타이틀 폰트 #111 / BOLD / 15 ~ 20 DP (예외 적용 가능) - 컨텐츠 폰트 #111 / REGULAR / 13 ~ 16 DP (예외 적용 가능) - 기본 폰트 #666 / REGULAR / 13 ~ 16 DP (예외 적용 가능) - 비활성화 폰트 #999 / REGULAR / 13 ~ 16 DP (예외 적용 가능) - 안내, 설명 #888 / REGULAR / 10 ~ 11 DP

Home plus Online Color Guide홈플러스 온라인 컬러 가이드 Main Color Home plus Red #ed1c24 Sub Color : Home plus Dark Blue #002458 UI Gray Color System #111111 #222222 #333333 #444444 #555555 #666666 #777777 #888888 (Text color 최소값) #999999 #aaaaaa #bbbbbb #cccccc #dddddd #eeeeee #f5f5f5 (추가) ※ 장차법 기준, Text Color는 가급적 #888888 이상의 컬러를 사용하도록 한다. ※ #000000 (black) 컬러는 특수 케이스를 제외하고는 사용하지 않는다.

Layout Guide레이아웃 가이드 (여백 / 상단바 / 하단툴바) 기본 여백은 좌우 15DP상단 바 높이 44 DP / 하단 툴바 높이 52 DP#999의 1DP 라인으로 구분한다. 아래 가이드는 xhdpi용(DP)으로 제작되었으로 xxhdpi 제작시에는 ×1.5해서 제작iOS(640px)는 여백 사이즈를 동일하게 하고, 팝업 영역과 버튼 너비를 조절해서 사용.아래 가이드에 사용된 아이콘은 as-is가 아님!! 가이드 제거한 화면

Notice Pop Up Guide공지 팝업 가이드 사용자에게 심플한 공지성 팝업을 띄우는 경우에 사용한다."예/아니오" "취소/확인" "쇼핑계속하기/앱종료하기"등 복잡하지 않은 action 요구시에만우측 상단 닫기버튼(X)은 중복 사용하지 않는다.아래 가이드는 xhdpi용(DP)으로 제작되었으로 xxhdpi 제작시에는 ×1.5해서 제작iOS(640px)는 여백 사이즈를 동일하게 하고, 팝업 영역과 버튼 너비를 조절해서 사용. 가이드 제거한 화면

Dimmed Guide딤드 가이드 딤드 부분 터치시 팝업 닫힘기본 팝업 노출 시 : Black(#000000) 70% 딤드 화면 위에 바로 텍스트 컨텐츠가 노출 되는 경우 : Black(#000000) 90% - 메인 my icon - SNS 공유화면

Contents Pop Up Guide컨텐츠 팝업 가이드 사용자에게 기능성 팝업을 띄우는 경우에 사용한다.우측 상단 닫기버튼(X)은 필수 노출하고, 하단 버튼에는 "닫기" 기능을 지양한다. 아래 가이드는 xhdpi용(DP)으로 제작되었으로 xxhdpi 제작시에는 ×1.5해서 제작iOS(640px)는 여백 사이즈를 동일하게 하고, 팝업 영역과 버튼 너비를 조절해서 사용. 예외 케이스 (상세 페이지 옵션 선택) 가이드 제거한 화면