CASE STUDY

2016 서울인권컨퍼런스

브랜딩 및 공식 웹사이트

웹사이트 클라이언트 서울특별시 — 2016 서울인권컨퍼런스 HTML CSS JavaScript jQuery Adobe Illustrator 조회 100

Overview

프로젝트 개요

서울시가 주최한 국제 인권 행사 '2016 Seoul Human Rights Conference'의 포스터 비주얼과 공식 홈페이지.

Background

국제 인권 행사를 하나의 시각 언어로

2016 서울인권컨퍼런스는 2016년 12월 5일부터 6일까지 서울시청에서 열린 국제 행사로, '국제 인권기준과 지방정부(International Human Rights Standards and the Role of Local Government)'를 주제로 국내외 연사가 참여했습니다. 다양한 국적과 배경의 참가자에게 행사의 취지를 직관적으로 전달할 시각 상징이 필요했고, 오프라인 홍보물과 온라인 채널이 하나의 브랜드로 읽히도록 통합하는 것이 핵심 목표였습니다.

O2O Mate는 '인권'과 '연대'라는 추상적 가치를 누구나 이해할 수 있는 하나의 심볼로 구현하고, 이를 웹 경험 전반으로 확장하는 브랜딩·기획·퍼블리싱·인터랙션 개발 전 과정을 단독 수행했습니다.

Identity

손을 맞잡은 원형 심볼

브랜딩의 중심에는 서로 손을 맞잡은 사람 형상이 원을 이루는 컬러 심볼이 있습니다. 초록·노랑·파랑·보라·주황·분홍의 다채로운 인물들이 커다란 원형 고리를 이루며 다양성과 연대를 상징하고, 그 안쪽에 행사 주제 문구를 배치했습니다. 상단에는 'I·SEOUL·U' 슬로건과 서울특별시 로고를, 하단에는 대회명과 일정·장소, 안내 주소(www.shrc.kr)를 정돈해 공식성을 확보했습니다. 확대·축소에도 선명해야 하는 벡터 그래픽이라 Adobe Illustrator로 제작해 포스터·웹·배너 등 매체별로 재활용 가능한 원본 자산을 확보했습니다.

2016 서울인권컨퍼런스 공식 포스터

손을 맞잡은 인물들이 원을 이루는 컬러 심볼 — 다양성과 연대를 담은 공식 포스터

Website

포스터에서 웹으로 이어지는 경험

포스터의 원형 심볼은 공식 홈페이지 메인의 슬라이드 배너로 그대로 계승됩니다. 좌우 화살표와 하단 인디케이터(3개 점)를 갖춘 슬라이더에 손 맞잡은 심볼과 주제 문구를 배치해, 포스터를 본 방문자가 웹에서도 동일한 인상을 받도록 했습니다. 메인 하단에는 '참가 안내·이벤트·오시는 길' 등 핵심 동선을 라인 아이콘 바로가기 카드로 정리하고, 공지사항·홍보자료·온라인 참가 신청·사무국 연락처를 한 화면에 모았습니다. 국문/English 언어 전환도 상단에 배치해 국제 행사의 성격을 반영했습니다. 화면은 HTML·CSS로 시맨틱 마크업과 스타일을 분리해 다국어·반응형 확장에 유연한 구조로 구축했습니다.

공식 웹사이트 메인 화면

포스터 심볼을 계승한 메인 슬라이드 배너와 라인 아이콘 바로가기 카드

연사 소개 페이지는 인터랙션이 가장 두드러지는 화면입니다. '일반 세션 1 – 인권 보장 제도 구축'을 비롯한 각 세션이 아코디언으로 펼쳐지고, 세션 안에는 연사의 사진·이름·소속과 '좌장/해외사례/국내사례' 태그가 붙은 카드가 그리드로 배열됩니다. 카드에 마우스를 올리면 링크·더보기 아이콘이 나타나고, 클릭하면 연사의 사진·직함·발표 세션·시간·발표 내용을 담은 상세 팝업이 떠오릅니다. 정보량이 많은 다국적 연사진을 산만함 없이 탐색하도록, 메인 슬라이드·카드 호버·상세 팝업·세션 아코디언 등 사용자 조작 요소는 크로스 브라우저 호환성이 검증된 JavaScript·jQuery로 구현했습니다.

연사 소개 페이지 — 아코디언 세션과 상세 팝업

세션별 아코디언과 연사 카드 그리드, 클릭 시 뜨는 상세 팝업으로 다국적 연사진을 탐색

Design System

관찰된 컬러 팔레트

심볼을 구성하는 여섯 빛깔의 인물들이 다양성과 연대라는 주제를 컬러 그 자체로 전달합니다. 아래 스와치는 실제 포스터와 웹 화면에서 관찰한 대표 색상입니다.

브랜드 컬러 (화면 관찰 기준)

Symbol Green · 연대
Symbol Yellow · 다양성
Symbol Blue · 신뢰
Symbol Purple · 포용
Accent Red · 일정/강조
Ink · 텍스트/헤더

Result

오프라인과 온라인을 잇는 브랜드 일관성

O2O Mate는 심볼 디자인과 포스터 제작을 아우르는 브랜딩부터, 이를 계승한 공식 웹사이트의 기획·퍼블리싱·인터랙션 개발까지 전 과정을 단독 수행했습니다. 오프라인 인쇄물과 온라인 채널을 하나의 시각 언어로 통합함으로써 국제 행사에 요구되는 브랜드 일관성과 신뢰감을 확보했고, 다양성과 연대라는 인권의 가치를 손 맞잡은 원형 심볼이라는 직관적 형태로 번역해 웹의 슬라이드·연사 인터랙션까지 자연스럽게 이어갔습니다.

공유하기 페이스북 트위터

아이디어를 현실로 만들 준비가 되셨나요?

프로젝트를 성공 스토리로 만들어 드리겠습니다.

문의하기