2D graphics
여기어때의 그래픽 아이덴티티를 가장 직관적으로 담아, 프로덕트 내 정보 전달과 시각적 일관성을 강화합니다. 복잡한 설명 없이도 사용자가 쉽게 이해할 수 있도록 설계되어, 명확하고 차별화된 경험을 제공합니다.
2D graphics
여기어때의 그래픽 아이덴티티를 가장 직관적으로 담아, 프로덕트 내 정보 전달과 시각적 일관성을 강화합니다. 복잡한 설명 없이도 사용자가 쉽게 이해할 수 있도록 설계되어, 명확하고 차별화된 경험을 제공합니다.
2D graphics
여기어때의 그래픽 아이덴티티를 가장 직관적으로 담아, 프로덕트 내 정보 전달과 시각적 일관성을 강화합니다. 복잡한 설명 없이도 사용자가 쉽게 이해할 수 있도록 설계되어, 명확하고 차별화된 경험을 제공합니다.
Download
Overview
Overview
Overview
Fundamentals of shape
여기어때 2D 그래픽은 브랜드의 핵심 가치(Simple, Scalable, Lively)를 반영하며, 로고에서 출발한 기하학적 도형 패턴을 기반으로 합니다. 여기에 자유로운 곡선을 더해, 유연하면서도 생동감 있는 그래픽을 완성합니다.
Fundamentals of shape
여기어때 2D 그래픽은 브랜드의 핵심 가치(Simple, Scalable, Lively)를 반영하며, 로고에서 출발한 기하학적 도형 패턴을 기반으로 합니다. 여기에 자유로운 곡선을 더해, 유연하면서도 생동감 있는 그래픽을 완성합니다.
Fundamentals of shape
여기어때 2D 그래픽은 브랜드의 핵심 가치(Simple, Scalable, Lively)를 반영하며, 로고에서 출발한 기하학적 도형 패턴을 기반으로 합니다. 여기에 자유로운 곡선을 더해, 유연하면서도 생동감 있는 그래픽을 완성합니다.
Metaphor
메타포는 단순한 장식이 아니라, 전달하려는 기능과 목적을 명확히 드러내는 장치입니다. 불필요한 요소는 최소화하고, 핵심 포인트를 시각적으로 집중시켜 디자인의 메시지를 강화합니다.
Metaphor
메타포는 단순한 장식이 아니라, 전달하려는 기능과 목적을 명확히 드러내는 장치입니다. 불필요한 요소는 최소화하고, 핵심 포인트를 시각적으로 집중시켜 디자인의 메시지를 강화합니다.
Metaphor
메타포는 단순한 장식이 아니라, 전달하려는 기능과 목적을 명확히 드러내는 장치입니다. 불필요한 요소는 최소화하고, 핵심 포인트를 시각적으로 집중시켜 디자인의 메시지를 강화합니다.
Description layering
그래픽의 디테일을 풍부하게 하기 위해 최소 3단계 이상의 레이어를 색상 차이로 표현합니다. 단순히 형태를 나열하는 것이 아니라, 레이어링을 통해 깊이·완성도·차별성을 확보할 수 있습니다. (일부 케이스는 예외적으로 간소화될 수 있습니다.)
Description layering
그래픽의 디테일을 풍부하게 하기 위해 최소 3단계 이상의 레이어를 색상 차이로 표현합니다. 단순히 형태를 나열하는 것이 아니라, 레이어링을 통해 깊이·완성도·차별성을 확보할 수 있습니다. (일부 케이스는 예외적으로 간소화될 수 있습니다.)
Description layering
그래픽의 디테일을 풍부하게 하기 위해 최소 3단계 이상의 레이어를 색상 차이로 표현합니다. 단순히 형태를 나열하는 것이 아니라, 레이어링을 통해 깊이·완성도·차별성을 확보할 수 있습니다. (일부 케이스는 예외적으로 간소화될 수 있습니다.)
Graphic style guide
Graphic style guide
Graphic style guide
Grid
기본 크기는 100x100px을 사용합니다. 이 크기는 다양한 환경에서 확장성과 일관성을 확보하기 위한 기준입니다. 필요에 따라 크기를 조정할 수 있으나, 기본 비율은 유지합니다.
Grid
기본 크기는 100x100px을 사용합니다. 이 크기는 다양한 환경에서 확장성과 일관성을 확보하기 위한 기준입니다. 필요에 따라 크기를 조정할 수 있으나, 기본 비율은 유지합니다.
Grid
기본 크기는 100x100px을 사용합니다. 이 크기는 다양한 환경에서 확장성과 일관성을 확보하기 위한 기준입니다. 필요에 따라 크기를 조정할 수 있으나, 기본 비율은 유지합니다.
Padding
모든 그래픽은 사방 20px의 패딩을 포함합니다. 시각적 균형과 그래픽간 균일한 볼륨감을 위해, 그래픽은 패딩 영역을 침범하지 않습니다.
Padding
모든 그래픽은 사방 20px의 패딩을 포함합니다. 시각적 균형과 그래픽간 균일한 볼륨감을 위해, 그래픽은 패딩 영역을 침범하지 않습니다.
Padding
모든 그래픽은 사방 20px의 패딩을 포함합니다. 시각적 균형과 그래픽간 균일한 볼륨감을 위해, 그래픽은 패딩 영역을 침범하지 않습니다.
Shape proportions
기본 비율은 1:2 또는 8:5를 사용합니다. 이는 일관된 시각적 안정감을 유지하기 위함입니다. 오브젝트의 기본 형태가 훼손될 수 있는 경우에는 예외적으로 조정할 수 있습니다.
Shape proportions
기본 비율은 1:2 또는 8:5를 사용합니다. 이는 일관된 시각적 안정감을 유지하기 위함입니다. 오브젝트의 기본 형태가 훼손될 수 있는 경우에는 예외적으로 조정할 수 있습니다.
Shape proportions
기본 비율은 1:2 또는 8:5를 사용합니다. 이는 일관된 시각적 안정감을 유지하기 위함입니다. 오브젝트의 기본 형태가 훼손될 수 있는 경우에는 예외적으로 조정할 수 있습니다.
Shadow rules
Shadow rules
Shadow rules
그림자는 하나의 그래픽 내 단차가 존재하거나 무광 유리의 반사광을 표현하는 상황에 사용됩니다.
그림자는 하나의 그래픽 내 단차가 존재하거나 무광 유리의 반사광을 표현하는 상황에 사용됩니다.
그림자는 하나의 그래픽 내 단차가 존재하거나 무광 유리의 반사광을 표현하는 상황에 사용됩니다.
방향과 각도
그림자는 좌측 상단에서 우측 하단으로 10° 각도로 표현합니다. 그림자에 그라데이션은 사용하지 않습니다.
방향과 각도
그림자는 좌측 상단에서 우측 하단으로 10° 각도로 표현합니다.
그림자에 그라데이션은 사용하지 않습니다.
방향과 각도
그림자는 좌측 상단에서 우측 하단으로 10° 각도로 표현합니다. 그림자에 그라데이션은 사용하지 않습니다.
색상
오브젝트 컬러의 동일 계열을 사용하며, 채도는 약 20~30% 낮춥니다.
색상
오브젝트 컬러의 동일 계열을 사용하며, 채도는 약 20~30% 낮춥니다.
색상
오브젝트 컬러의 동일 계열을 사용하며, 채도는 약 20~30% 낮춥니다.
View angle
Front, Side, Top view 중 메타포의 구조를 명확하게 보여줄 수 있는 방향을 선택합니다. 아이소메트릭(Isometric)이나 원근법(Perspective)과 같은 3D 시점은 사용하지 않습니다.
View angle
Front, Side, Top view 중 메타포의 구조를 명확하게 보여줄 수 있는 방향을 선택합니다. 아이소메트릭(Isometric)이나 원근법(Perspective)과 같은 3D 시점은 사용하지 않습니다.
View angle
Front, Side, Top view 중 메타포의 구조를 명확하게 보여줄 수 있는 방향을 선택합니다. 아이소메트릭(Isometric)이나 원근법(Perspective)과 같은 3D 시점은 사용하지 않습니다.
Material
Material
Material
Default
매트한 단색을 사용하며, 그라데이션은 사용하지 않습니다.
Default
매트한 단색을 사용하며, 그라데이션은 사용하지 않습니다.
Default
매트한 단색을 사용하며, 그라데이션은 사용하지 않습니다.
Matte glass
10° 또는 20° 각도의 제한적 반사광을 허용합니다. 단, 복잡도 높은 메타포에는 반사광을 표현하지 않습니다.
Matte glass
10° 또는 20° 각도의 제한적 반사광을 허용합니다. 단, 복잡도 높은 메타포에는 반사광을 표현하지 않습니다.
Matte glass
10° 또는 20° 각도의 제한적 반사광을 허용합니다. 단, 복잡도 높은 메타포에는 반사광을 표현하지 않습니다.
Glossy glass
재질감을 위해 하이라이트를 추가합니다. 단, 복잡도 높은 메타포에는 별도의 하이라이트를 표현하지 않습니다.
Glossy glass
재질감을 위해 하이라이트를 추가합니다. 단, 복잡도 높은 메타포에는 별도의 하이라이트를 표현하지 않습니다.
Glossy glass
재질감을 위해 하이라이트를 추가합니다. 단, 복잡도 높은 메타포에는 별도의 하이라이트를 표현하지 않습니다.
Stroke
Line 형태가 필요한 경우 2px 또는 4px 두께만 사용합니다.
Stroke
Line 형태가 필요한 경우 2px 또는 4px 두께만 사용합니다.
Stroke
Line 형태가 필요한 경우 2px 또는 4px 두께만 사용합니다.
Font
기본 폰트는 Pretendard Medium을 사용합니다. 텍스트 사용은 최소화하며, 그래픽을 보조하는 수준에서만 허용합니다. 정보 전달 목적이 아닌 장식적 텍스트는 사용하지 않습니다
Font
기본 폰트는 Pretendard Medium을 사용합니다. 텍스트 사용은 최소화하며, 그래픽을 보조하는 수준에서만 허용합니다. 정보 전달 목적이 아닌 장식적 텍스트는 사용하지 않습니다
Font
기본 폰트는 Pretendard Medium을 사용합니다. 텍스트 사용은 최소화하며, 그래픽을 보조하는 수준에서만 허용합니다. 정보 전달 목적이 아닌 장식적 텍스트는 사용하지 않습니다
Color palette
컬러는 700, 800 단계를 기본값으로 사용합니다. 그래픽 제작 시 색상은 최대 3가지 이내로 제한해 가독성과 일관성을 유지합니다.
Color palette
컬러는 700, 800 단계를 기본값으로 사용합니다. 그래픽 제작 시 색상은 최대 3가지 이내로 제한해 가독성과 일관성을 유지합니다.
Color palette
컬러는 700, 800 단계를 기본값으로 사용합니다. 그래픽 제작 시 색상은 최대 3가지 이내로 제한해 가독성과 일관성을 유지합니다.
Lively red
Lively red
Lively red
50
#FFF5F5
100
#FFEDEA
200
#FEDFDE
300
#FDB8B4
400
#FC9994
500
#FB7F79
500
#FB7F79
600
#FB6C65
700
#FA5850
800
#F94239
900
#EA2013
950
#D60A00
Blue
Blue
Blue
50
#F2F8FF
100
#E3F0FF
200
#D0E6FF
300
#ADD4FF
400
#80BDFF
500
#57A9FF
600
#45A0FF
700
#3396FF
800
#1D8BFF
900
#006CE0
Cyan
Cyan
Cyan
10
#ECF6FB
50
#DAF4FF
100
#C1ECFF
200
#ADE6FF
300
#92DDFF
400
#66D0FF
500
#36C1FF
600
#00B0FF
700
#0099DE
G800
#007AB1
Green
Green
Green
10
#EFFCF4
50
#D8F9E7
100
#BAFAD7
200
#9BF5C4
300
#64EDA1
400
#47DD8A
500
#0FD166
600
#00BF56
700
#008E40
G800
#007635
Mint
Mint
Mint
10
#F3F7F6
50
#E7F7F3
100
#D9F2EC
200
#BBE8DD
300
#9EDFCF
400
#83D5C2
500
#59C7AD
600
#36BB9C
700
#1AB28E
M800
#00A981
Yellow
Yellow
Yellow
50
#FFF4D8
100
#FFEFC3
200
#FFEAB2
300
#FFE5A2
400
#FFE192
500
#FFDB7F
600
#FFD361
700
#FFCD4E
800
#FFC83B
900
#FFB803
950
#EA7900
Violet
Violet
Violet
10
#F6F5FF
50
#EDEBFF
100
#DCD6FF
200
#CAC2FF
300
#B9ADFF
400
#A799FF
500
#806BFF
600
#7059FA
700
#5F49E5
800
#4F3BCC
Orange
Orange
Orange
50
#FFE7D6
100
#FFDAC2
200
#FFC8A3
300
#FFAD85
400
#FF9B70
500
#FF875C
600
#FF7847
700
#FF6933
800
#FA591E
900
#E9490F
Natural
Natural
Natural
10
#FAFAFA
N50
#F5F5F5
N100
#EBEBEB
N200
#DCDCDC
N300
#BBBBBB
N400
#999999
N400
#999999
N500
#8B8B8B
N600
#707070
N700
#5C5C5C
N800
#474747
N900
#333333
N800
#474747
Common
Common
Common
100
#FFFFFF
0
#000000
Design workflow
Design workflow
Design workflow
Design process
그래픽 제작은 다음 4단계를 순차적으로 진행합니다. 각 단계를 따르면 제작 과정이 단순화되고, 결과물의 일관성과 완성도를 높일 수 있습니다.
Design process
그래픽 제작은 다음 4단계를 순차적으로 진행합니다. 각 단계를 따르면 제작 과정이 단순화되고, 결과물의 일관성과 완성도를 높일 수 있습니다.
Design process
그래픽 제작은 다음 4단계를 순차적으로 진행합니다. 각 단계를 따르면 제작 과정이 단순화되고, 결과물의 일관성과 완성도를 높일 수 있습니다.
Additional shape description
모든 그래픽은 기본 기하학 도형을 기반으로 제작합니다. 필요 시 변형된 도형이나 일부 곡선을 보조적으로 사용하되, 기본 구조는 기하학 원리에 충실해야 합니다.
Additional shape description
모든 그래픽은 기본 기하학 도형을 기반으로 제작합니다. 필요 시 변형된 도형이나 일부 곡선을 보조적으로 사용하되, 기본 구조는 기하학 원리에 충실해야 합니다.
Additional shape description
모든 그래픽은 기본 기하학 도형을 기반으로 제작합니다. 필요 시 변형된 도형이나 일부 곡선을 보조적으로 사용하되, 기본 구조는 기하학 원리에 충실해야 합니다.
Usage
Usage
Usage
Size restrictions
Size restrictions
Size restrictions
36px 미만
컨테이너가 디바이스 넓이 375px 기준 36px 미만일 경우, 픽토그램 · 시스템 아이콘만 사용해야하며 2D 그래픽 사용은 지양합니다.
36px 미만
컨테이너가 디바이스 넓이 375px 기준 36px 미만일 경우, 픽토그램 · 시스템 아이콘만 사용해야하며 2D 그래픽 사용은 지양합니다.
36px 미만
컨테이너가 디바이스 넓이 375px 기준 36px 미만일 경우, 픽토그램 · 시스템 아이콘만 사용해야하며 2D 그래픽 사용은 지양합니다.
36px 이상 ~ 260px 이하
단일 2D 아이콘 사용이 가능합니다.
36px 이상 ~ 260px 이하
단일 2D 아이콘 사용이 가능합니다.
36px 이상 ~ 260px 이하
단일 2D 아이콘 사용이 가능합니다.
261px 이상
모바일 환경 기준으로, 컨테이너가 261px 이상일 경우, 최소 2개 이상의 그래픽을 조합합니다. 하나의 컨테이너 내에 최대 5개의 그래픽을 배치할 수 있습니다.
261px 이상
모바일 환경 기준으로, 컨테이너가 261px 이상일 경우, 최소 2개 이상의 그래픽을 조합합니다. 하나의 컨테이너 내에 최대 5개의 그래픽을 배치할 수 있습니다.
261px 이상
모바일 환경 기준으로, 컨테이너가 261px 이상일 경우, 최소 2개 이상의 그래픽을 조합합니다. 하나의 컨테이너 내에 최대 5개의 그래픽을 배치할 수 있습니다.
36px 미만 또는 261px 이상에서 단일 아이콘만 사용하는 것은 불가합니다.
36px 미만 또는 261px 이상에서 단일 아이콘만 사용하는 것은 불가합니다.
36px 미만 또는 261px 이상에서 단일 아이콘만 사용하는 것은 불가합니다.
36px 이상 영역에서는 2D 그래픽 사용이 가능합니다.
36px 이상 영역에서는 2D 그래픽 사용이 가능합니다.
36px 이상 영역에서는 2D 그래픽 사용이 가능합니다.
Home
홈 화면에 적용된 2D 그래픽 조합 및 사용 예시입니다. 브랜드 아이덴티티를 반영한 그래픽 활용 방법을 확인할 수 있습니다.
Home
홈 화면에 적용된 2D 그래픽 조합 및 사용 예시입니다. 브랜드 아이덴티티를 반영한 그래픽 활용 방법을 확인할 수 있습니다.
Home
홈 화면에 적용된 2D 그래픽 조합 및 사용 예시입니다. 브랜드 아이덴티티를 반영한 그래픽 활용 방법을 확인할 수 있습니다.
Promotion
프로모션 페이지에 적용된 2D 그래픽 조합 및 사용 예시입니다. 브랜드 아이덴티티를 반영한 그래픽 활용 방법을 확인할 수 있습니다.
Promotion
프로모션 페이지에 적용된 2D 그래픽 조합 및 사용 예시입니다. 브랜드 아이덴티티를 반영한 그래픽 활용 방법을 확인할 수 있습니다.
Promotion
프로모션 페이지에 적용된 2D 그래픽 조합 및 사용 예시입니다. 브랜드 아이덴티티를 반영한 그래픽 활용 방법을 확인할 수 있습니다.
Credit
Contributor
노아@Noah, 그린@Green
Credit
Contributor
노아@Noah, 그린@Green
Credit
Contributor
노아@Noah, 그린@Green
Copyright © GC COMPANY Corp. All rights reserved.
Copyright © GC COMPANY Corp. All rights reserved.
Copyright © GC COMPANY Corp.
All rights reserved.