CASE STUDY
2015 국제디자인총회(IDC)
광주 공식 웹사이트
Overview
프로젝트 개요
70개국 디자인 전문가가 참여한 국제 행사 '2015 International Design Congress'의 다국어 공식 웹사이트.
Background
70개국이 모이는 국제 행사의 얼굴
2015 국제디자인총회(2015 IDC)는 한국공예·디자인문화진흥원과 광주광역시가 공동 주최한 대규모 디자인 행사로, 2015년 10월 17일부터 23일까지 46개국·2,000여 명이 참가했습니다. ico-D·Icsid·Ifi·IxDA·SDN·Cumulus 등 국제 디자인 기구가 파트너로 참여한 만큼, 공식 웹사이트에는 상반된 두 요구가 동시에 걸려 있었습니다.
하나는 전 세계 참가자가 어려움 없이 정보에 접근하는 국제 표준 수준의 다국어 대응, 다른 하나는 한국 광주에서 열리는 행사만의 문화적 정체성이었습니다. O2O Mate는 '이음(Eeum): Design Connects'라는 대회 주제를 시각 언어 그 자체로 번역해, 이 두 축을 하나의 화면 안에 녹여내는 것을 핵심 과제로 삼았습니다.
Design Language
콜라주 레이아웃 · 섹션별 컬러 테마
실험적 편집 디자인을 웹 위에서 재현
콜라주형 메인 레이아웃
흑백 한옥·장독대 사진을 전면 배경으로 깔고, 오렌지·그린·골드로 채색된 사각 카드를 불규칙하게 겹쳐 쌓았습니다. '이음(Eeum)' 로고와 개막 안내, Latest News, 연사 카드가 편집 디자인의 대지처럼 리듬감 있게 배치됩니다.
섹션별 컬러 테마 전환
인사말은 그린, 프로그램·전시는 골드, 연사는 오렌지로 배경 톤 전체가 바뀝니다. About·Venue·Programs·Speakers·Registration·News 6개 메뉴를 색으로 구분해 탐색성을 높였습니다.
노드형 프로그램 다이어그램
'Program at a glance'는 Congress·Keynote·Workshops·Exhibitions 등 세부 프로그램을 선으로 연결한 노드형 다이어그램으로 표현하고, 시간대별 스케줄 표를 클릭 시 상세가 펼쳐지도록 구성했습니다.
이중언어 · 반복 패턴 블록
헤더의 English·한국어 전환으로 즉시 언어를 오가고, 도트·사선 스트라이프 같은 반복 패턴 블록으로 여백을 채워 그래픽 밀도를 높였습니다.
Screen 01
메인 — 이음(Eeum) 콜라주 홈
메인 화면은 흑백 한옥 사진 위에 오렌지 톤 카드를 겹쳐 쌓은 콜라주 레이아웃으로, 정적인 관공서형 사이트와 전혀 다른 인상을 만듭니다. 개막 안내(10.17–23, 2015 · Gwangju, Korea), Welcome 메시지, Latest News, ico-D·Icsid·Ifi·IxDA·SDN·Cumulus 파트너 로고, Soren Petersen·Bernd Schmitt 연사 카드가 대지 위에 흩어져 배치됩니다.
흑백 한옥 배경 위 오렌지 콜라주 카드로 구성한 메인 — 이음(Eeum) 로고, 개막 안내, Latest News, 파트너·연사 카드 (2015idc.org)
Welcome Message — 그린 컬러 테마로 전환되는 인사말 페이지, 조직위 공동위원장 인사와 Event Overview를 담음
Screen 02
프로그램 · 연사 · 전시
프로그램·전시 페이지는 골드 톤으로, 연사 페이지는 오렌지 톤으로 배경이 바뀌며 섹션을 색으로 구분합니다. 프로그램은 노드형 다이어그램과 시간대별 스케줄 표로, 연사는 세션 기준 정렬 드롭다운과 흑백 인물 그리드로 국제 연사진을 체계적으로 정리했습니다.
Program at a glance — 골드 테마 위에 Congress·Keynote·Workshops·Exhibitions를 선으로 연결한 노드형 다이어그램과 클릭형 스케줄 표
Speakers — 오렌지 테마와 'Sort speakers by: Session' 정렬 드롭다운, 흑백 인물 그리드로 정리한 국제 연사진
News · Important Dates — 흑백 사진과 최소한의 컬러 포인트로 대회 성료 소식과 등록 일정을 전달
Exhibition — Design City Zone·International Design School Zone 등 존별 소개와 신청서 다운로드를 담은 전시 안내 (골드 테마)
Tech
콜라주와 컬러 테마를 견고하게 제어
프론트엔드는 HTML·CSS·JavaScript·jQuery 기반으로 구축했습니다. 겹쳐진 카드와 배경 사진이 어긋나지 않게 맞물려야 하는 콜라주 레이아웃과 섹션마다 달라지는 컬러 테마를 안정적으로 제어하기 위해 시맨틱 마크업과 CSS를 견고하게 설계했고, 스케줄 표 확장·연사 정렬·네비게이션 동작 등 인터랙션은 크로스 브라우저 안정성이 검증된 jQuery로 구현했습니다.
Design System
관찰된 컬러 팔레트
흑백 사진 배경 위에서 오렌지·그린·골드 세 컬러가 섹션을 구분하고 그래픽 밀도를 만듭니다. 아래 스와치는 실제 구축된 화면에서 관찰한 대표 색상입니다.
브랜드 컬러 (화면 관찰 기준)
Result
심미성과 정보 전달력을 동시에
O2O Mate는 이 프로젝트에서 디자인 시안의 웹 구현, 즉 퍼블리싱과 프론트엔드 개발을 맡아 실험적 편집 디자인을 브라우저 위에서 흐트러짐 없이 재현했습니다. 감각적인 그래픽을 유지하면서도 방대한 프로그램·연사·전시 정보를 6개 메뉴 체계 안에 정돈해 심미성과 정보 전달력을 동시에 확보했습니다. 이 사이트는 46개국 2,000여 참가자를 맞이한 대회의 공식 관문으로서, O2O Mate의 실험적 퍼블리싱 역량을 보여주는 대표 사례로 남았습니다.
같은 카테고리의 다른 프로젝트
