그리드, 정렬, 여백과 명확한 정보 위계가 관람 결정에 필요한 사실을 빠르게 찾게 합니다.
00 / Name meaning
사이를 건너,
다음 경험으로
‘이음’은 서로 다른 존재 사이에 관계를 만들고, 그 관계를 다음 경험으로 이어가는 이름입니다. 하나의 전시를 작품으로, 작품을 작가의 삶과 맥락으로, 그 맥락을 오늘의 관람자에게 잇습니다. 정보가 방문으로, 호기심이 감상으로, 한 번의 관람이 다음 발걸음으로 이어지도록 돕는 것이 이음의 역할입니다.
01 / Encounter전시와 관람자
02 / Context작품과 작가의 맥락
03 / Sensibility익숙한 취향과 새로운 감각
04 / Continuity오늘의 선택과 다음 경험
Public brand concept
내 취향에서 시작해,
오늘의 전시로 이어지다.
이음은 전시 정보와 예술인의 맥락을 정확하게 연결하고, 각자의 취향과 상황에 맞는 관람의 입구를 엽니다. 익숙하게 몰입할 수 있는 전시와 평소와 다른 감각을 만나는 가능성을 함께 제안합니다.
페이지마다 한글의 일부가 Hero Character로 변주되어 전시의 성격과 감각을 드러냅니다.
이미 좋아하는 감각과 관람 방식에서 편안하게 예술을 만날 수 있도록 안내합니다.
열린 모서리처럼, 전시가 평소 덜 쓰던 감각을 열어줄 수 있다는 가능성을 제안합니다.
01 / Official logo
질서 안에서 열린 형태
현재 사이트에 적용된 공식 로고는 연결 심벌, 기하학적 이음 워드마크, 영문 IEUM을 하나의 흐름으로 결합합니다. 클레이 오렌지는 관계가 시작되는 한 지점에만 사용하고, 열린 모서리는 다음 경험으로 이어지는 가능성을 남깁니다.
Primary lockup
Standalone wordmark
Monochrome
Reverse
02 / Shape meaning
로고가 곧 디자인 문법
원, 세로선, 직사각형, 열린 모서리는 로고에만 머물지 않습니다. 카드와 필터, 퀴즈, 작가 DB, 섹션 구분과 모션에서 같은 의미를 유지하며 반복됩니다.
03 / Size & clear space
더 단순하게
공식 잠금형 주변에는 심벌 안쪽 사각형 한 변을 기준 단위 X로 삼아 최소 여백을 확보합니다. 작은 크기에서는 오렌지 포인트와 열린 모서리가 뭉개지지 않는지를 먼저 확인합니다.
X
사방 최소 1X
다른 글자, 선, 이미지, 카드 경계가 로고의 보호 영역 안으로 들어오지 않습니다.
LOCKUP 120px
WORD 96px
디지털 최소 권장
잠금형은 가로 120px, 영문이 결합된 워드마크는 가로 96px 이상을 권장합니다. 더 작은 파비콘은 별도의 단색 심벌을 사용합니다.
높이 56px의 기준
현재 헤더는 데스크톱 56px, 모바일 48px 높이를 기준으로 합니다. 심벌이 장식처럼 작아지지 않도록 최종 잠금형의 비율을 그대로 유지합니다.
04 / Colour
차분한 기반, 한 번의 연결점
잉크와 아이보리가 기본 대비를 만들고 모스 그린이 신뢰와 방향을, 클레이 오렌지가 관계가 시작되는 작은 순간을 표시합니다. 오렌지는 한 화면에서 시각적 중심 하나에만 사용합니다.
Ink#1D2721
Warm Ivory#F7F4EE
Moss Green#395B45
Clay Orange#CA6548
Sand#E7DDCA
05 / Typography
제목은 조각처럼,
정보는 정확하게
로고는 벡터 도형으로 고정하고 사이트의 실제 텍스트는 웹에서 읽히는 글자로 유지합니다. 디스플레이 타이포의 자유와 본문 정보의 안정성을 역할로 분리합니다.
오늘의 전시,
어디서 시작할까요?
어디서 시작할까요?
큰 한글, 압축된 자간, 짧은 문장. 한 화면에 하나의 시각적 주제를 세웁니다.
전시명, 기간, 장소, 관람시간, 예약과 최종 확인일은 장식보다 명확한 정보 위계로 보여줍니다. 한글 본문은 작은 화면에서도 편하게 읽히는 시스템 글꼴을 사용합니다.
본문 16px 이상 · 충분한 행간 · 링크와 상태는 색만으로 구분하지 않기
06 / Hero Characters
형태는 변주되고,
의미는 이어진다
Hero Character는 공식 로고를 변형하는 장치가 아닙니다. 전시명이나 관람 감각에서 뽑은 한글과 기하 요소를 크게 확장해 각 페이지의 성격을 만드는 별도의 시각 언어입니다.
공간을 느끼며
글자가 화면 밖으로 이어지며 전시장 안의 거리와 이동을 암시합니다.
귀로 걷기
선과 간격의 리듬으로 소리의 방향과 여백을 표현합니다.
색을 따라
오렌지는 한 지점에만 두고 나머지 화면은 절제된 대비로 유지합니다.
07 / Product application
관람의 각 단계에 같은 언어
기하 요소는 꾸밈을 채우기 위해 반복하지 않습니다. 각 화면에서 사용자가 지금 무엇을 보고, 다음에 무엇을 선택하는지를 알려주는 기능과 결합합니다.
전시 카드
직사각형은 정확한 정보를 담고 열린 모서리는 상세 페이지로 이어지는 행동을 암시합니다.
오늘의 전시 찾기
원은 선택과 만남, 세로선은 질문의 흐름, 오렌지는 현재 선택한 한 지점에만 사용합니다.
오늘은 어디에서 시작할까요?
예술인 DB
초상 이미지가 없을 때는 이름의 첫 글자를 Hero Character로 사용하고, 공식 출처와 연결 전시는 명확한 정보 칸에 둡니다.
08 / Do not
로고의 질서를 흐리지 않기
로고는 이미 원, 직선, 열린 모서리의 충분한 기억점을 갖습니다. 효과를 더해 개성을 만들기보다, 여백과 정확한 배치로 브랜드의 자신감을 보여줍니다.
가로·세로 비율을 임의로 늘이거나 줄이지 않습니다.
로고 자체를 기울여 역동성을 만들지 않습니다.
그림자, 광택, 외곽선 효과를 추가하지 않습니다.
명도 대비가 부족하거나 복잡한 이미지 위에 직접 올리지 않습니다.
09 / Accessibility
보이는 형태와 읽히는 이름을 함께
이음의 미학은 접근성을 양보해서 얻는 효과가 아닙니다. 로고와 Hero Character가 강해질수록 실제 제목, 전시 정보와 행동 문구는 더 분명하게 제공합니다.
First principle
이미지는 의미를 대신하지 않는다
장식용 기하 요소는 보조 기술에서 숨기고, 로고 이미지에는 브랜드명이 포함된 대체 텍스트를 제공합니다.
Checklist
디지털 적용 확인
- 본문과 주요 정보는 모바일에서도 최소 16px을 기준으로 합니다.
- 상태, 링크, 선택 여부를 색 하나로만 전달하지 않습니다.
- 텍스트를 이미지로 대체하지 않으며 검색과 확대가 가능한 실제 글자를 유지합니다.
- 모션은 짧고 목적이 있어야 하며, 움직임 감소 설정을 존중합니다.
- 모바일 390px에서 가로 스크롤 없이 로고와 정보가 한 열로 정리되어야 합니다.