웹디자인 사례 모음

경계를 넘어선 No.1 하이엔드 라이프스타일 리더 노블레스 매거진의 디지털 온라인 사이트를 새롭게 리뉴얼하였습니다. 기존 매거진의 깊이 있는 콘텐츠를 디지털 환경에 최적화하여 보다 직관적이고 몰입감 있게 전달하고, 브랜드 특유의 고급스러운 무드를 현대적인 비주얼과 인터랙션으로 확장하는 데 중점을 두었습니다. 노블레스미디어인터내셔날은 1990년 국내 최초 하이엔드 라이프스타일 매거진 '노블레스'를 시작으로 '아트나우', '노블레스 맨', 'Y'까지 총 4개의 매거진을 발행하며, 온·오프라인을 아우르는 글로벌 미디어 기업으로 부상 중입니다. 이번 리뉴얼은 이러한 브랜드 자산을 기반으로 콘텐츠 접근성과 가독성을 강화하고, 다양한 디지털 채널과의 유기적인 연결을 통해 글로벌 플랫폼으로서의 확장성을 높이는 데 목적을 두었습니다.

대한민국에서 가장 오랜 역사를 가진 서울신문이 창간 120주년을 맞아 독자친화적인 사이트로 리뉴얼하였습니다. 스튜디오 제이티는 뉴스 매체의 특성과 브랜드에 대한 이해와 접근으로 서울신문의 새로운 시작을 함께 디자인하였습니다. 일반적인 신문사의 레이아웃 틀에서 벗어나 매거진 형태의 자유롭고 세련된 획일화되지 않는 다양함을 추구하였고, 와이드하고 자유로운 레이아웃을 사용해 세련된 느낌을 주었습니다. 어퍼스트로피 형태의 로고 심볼의 라운드를 썸네일 및 섹션에 활용하여 일관성있는 아이텐티티를 유지할 수 있도록 하였고, 고유 색상인 오렌지 컬러와 깊이 있는 선명한 흑백 컬러가 대비되어 서울신문의 브랜드를 더 돋보이게 합니다. 다양하고 유연하게 콘텐츠 및 기능을 UI/UX하여 PC와 MO의 주요 페이지 작업물을 통해 전체 디자인 개발 작업이 진행될 수 있도록 디자인 가이드를 제공하였습니다.

고객의 일상의 특별함의 더하는 동반자 LIFEPLUS. LIFEPLUS는 한화 금융 계열사의 공동 마케팅 브랜드로 공통된 브랜드 가치를 고객에게 전달하는 것을 목표로 합니다. 이를 위해 다양한 서비스와 활동들을 브랜드 메시지와 맥락을 같이 할 수 있도록 페이지 흐름을 연결하고 추상적으로 다가올 수 있는 브랜드 심상을(동반자, 기술) 이미지와 선(Line) 요소를 활용하여 사이트 전반에 효과적으로 나타날 수 있도록 구성하였습니다. 또한, 스크롤 기반 모션 효과를 활용하여 이미지와 메시지를 적절한 타이밍에 등장시킴으로써 사용자에게는 지루하지 않는 콘텐츠 탐색 경험을 제공함과 동시에 브랜드 메시지를 효과적으로 전달될 수 있게 구현하였습니다.

카카오 공동체와의 연결 사용자들에게 더욱 효과적인 서비스 소식을 알리기 위해 편리한 위젯 기능을 제공함으로써 첫 화면에서 다양한 소식을 손쉽게 확인할 수 있도록 구성하였습니다. 이를 통해 카카오의 다양한 서비스를 효과적으로 표현하고, 사용자 경험을 높이는데 집중하였습니다.

남자를 위한 모든 이야기를 담는 하이엔드 남성 패션 매거진 사이트 '맨 노블레스' 하이엔드 콘텐츠를 제공하는 매체사의 특성을 담아 `남성`, `매체사`, `광고` 3가지 핵심 요소를 심플하게 녹여내었습니다. 헤더 영역의 모션은 책자를 넘기는 동작을 의미하며 다양한 스토리가 시작되고 펼쳐지는 순간을 표현하였습니다. 심플하고 볼드한 폰트와 콘텐츠가 카테고리 구분 없이 다채롭게 노출 될 수 있는 배치를 통해 사용자가 콘텐츠를 탐색하는데 지루하지 않고 사이트 유입→탐색→공유의 과정이 매끄럽게 연결될 수 있도록 구성하였습니다. 또한, 썸네일의 자유도를 제공하면서 단순히 디자인적인 단조로움만 피하는 것이 아닌 사이트 운영의 자유도를 함께 제공하였습니다. 무엇보다 사용자가 사이트를 탐색하는 과정에서 노출되는 광고 소재가 이질적인 요소가 아닌 한 번쯤 궁금하고 눌러보고 싶은 `컨텐츠`처럼 보일 수 있는 구성과 디자인을 통해 맨 노블레스의 비즈니스모델과 사용자 UX를 매끄럽게 조화시켰습니다.

카카오엔터프라이즈는 오랜 시간 동안 축적된 AI 기술력과 서비스 경험을 제공하고, 비즈니스 파트너들과 함께 더 스마트한 일상을 만드는 국내 대표 IT 플랫폼 기업입니다. 이를 타겟한 유저에게 자연스러운 콘텐츠를 연계시켜 서비스와 기술의 간접 체험을 통해 기업과 비즈니스에 대한 연결고리를 형성합니다. 이러한 기업의 내부 시스템 관리 편의성을 위한 워드프레스 테마를 개발하였습니다. 운영되는 콘텐츠는 제한적이지 않으며 자유롭게 서빙이 가능한 컴포넌트와 블록 개발과 동시에 단정하고 규칙적인 레이아웃을 제공합니다. 또한 새롭게 추가된 고객사례 메뉴는 우리의 일상 속 스며드는 AI 기술력을 알림과 기업에서 제공하는 비즈니스에 대해 편안한 정보탐색의 여정을 돕고, 그 끝에는 카카오엔터프라이즈와 이어지는 역할이 되어 더 스마트하고, 더 편리한 라이프를 위한 소통이 계속됩니다.

컬러버스는 자신만의 색깔을 담은 세계를 만들고 공유하는 오픈 메타버스 플랫폼입니다. 컬러버스만의 창의력과 무한한 가능성, 다채로운 컬러를 사이트에 담는 것을 목표로 하였으며, 더불어 자신만의 공간을 만들고 그들이 모여 커뮤니티와 타운, 그리고 월드 까지 확장됨을 느낄 수 있도록 파티클을 이용해 표현하였습니다. 컬러버스가 정식 오픈되기 전 티저 사이트 방문하시는 분들에게는 즐거운 기다림을, 오픈 후 컬러버스를 플레이하시는 분들에게는 자신만의 색으로 세상을 만들어가는 신선한 경험이 되시길 바랍니다.

'오티에르'는 ‘HAUTE’와 ‘TERRE’가 결합된 프랑스어로 고귀한 사람들이 사는 특별한 곳이라는 의미를 가지고 있는 포스코이앤씨의 하이엔드 브랜드입니다. 새로 런칭하는 브랜드의 아이덴티티를 담기 위해 '대담한 특권'이라는 키워드로 디자인 콘셉트를 잡고, 오티에르의 메세지와 가치를 전달 할 수 있는 카피라이팅에 집중했습니다. · 브랜드의 임팩트를 전달하고 기대감을 유도할 수 있는 인트로 삽입 · 직선의 빛으로 공간을 표현하며 시선을 끌고, 압도적인 웅장함을 표현한 메인비주얼영상 · 피아노 선율로 시작되는 설레임과 두근거림, 첼로가 주는 안정감과 웅장함을 주는 배경 사운드 · 원페이지 구성으로 브랜드 집중도를 높이고, 전달하고자 하는 메세지 노출 · 동적인 감각과 정적인 감각을 교차하며 리듬감을 줄 수 있는 인터랙티브한 화면 구성 · 볼드한 스타일의 오티에르 로고를 활용한 디자인 푸터, 3D모델링을 통해 입체적인 로고 표현 오티에르를 처음을 알리는 채널로써 하이엔드 브랜드 이미지가 잘 전달될 수 있도록 노력하였습니다.

LG생활건강의 글로벌 자연발효연구가 새롭게 시작되는 곳, 홋카이도 마이크로바이옴 센터의 공간을 온라인으로 관람합니다. 웹사이트는 크게 센터에 대한 소개와 함께 자연발효연구에 대해 이야기하고 있습니다. 일본이라는 지리적 특성과 센터라는 공간적 특수성을 온라인 공간으로 구조화해 차분하고 정중하게 안내합니다. 마이크로바이옴 센터의 공간을 디자인하고, 전시 공간의 콘텐츠를 통해 충분한 이해로 센터의 설립목적과 앞으로 나아갈 방향에 대해 전달되도록 하는 것에 초점을 두었습니다.

스페이스로그는 공간기록에서 새롭게 런칭한 인테리어 전문 브랜드로 "정제되고 기본에 충실한 디자인을 통해 고객의 일상을 기록하고 무한한 가능성의 공간으로 채워나간다"는 철학을 가지고 있습니다. 점과 선, 면이라는 기본적인 모티프 요소를 브랜드아이덴티티로 활용하여 사이트 곳곳에 녹여내고 방문자가 스페이스로그의 디자인과 감성에 공감할 수 있도록 디자인하였습니다.

풍림무약 주식회사는 고부가가치 원료를 국내에 유통하는 무역사업부와 R&D센터 운영 및 천연물, 완제의약품, 신의약 등을 생산하는 제약사업부로 이루어져 있습니다. 하나의 사업부에 무게감을 주지 않고 두 사업부 모두 균등하게 표현하고자 노력하였으며, 방문자들이 각 사업부에 대한 이해가 쉽도록 관련 이미지와 아이콘 제작에 힘썼습니다. 또한 풍림무약에서 취급하는 다양한 제품을 빠르게 검색할 수 있도록 통합 검색기능을 구축하였으며, SEO(검색엔진최적화)작업을 통해 특정 원료/제품 구매를 희망하는 고객들에게 구글 검색 시 검색결과에 더욱 잘 노출되도록 유도하였습니다.