안녕하세요. UX팀 디자이너 김지영입니다.
이번에 새롭게 오픈한 템플릿 Cera — Mix를 소개하고, 간단한 작업기를 말씀드리려고 합니다.

창작자를 위한 공간

아임웹은 그 초창기부터 일러스트레이터, 소규모 디자인 스튜디오, 공방 등 개성 있는 창작자들이 사용해 왔습니다. 다만 최근 몇 년간 아임웹 브랜드 인지도가 높아지면서 창작자분들이 개설하는 사이트가 괄목할 만한 수준으로 증가하게 되었습니다.

처음에는 템플릿 작업을 위한 기초 조사로 시작한 사용자 모니터링이었습니다. 단순 서칭과 분류로 예상했던 일이었는데, 생각보다 많은 작가분들이 개성 있는 작업물들을 가지고 있다는 점을 확인하게 되었습니다. 더불어 사이트의 목적도 포트폴리오/쇼핑의 경계가 뚜렷한 것이 아닌 그 두 가지가 모호하게 설정된 것이 인상적이었습니다. 이와 같은 사이트들의 주요 특징은 아래와 같습니다.

• 작품(이미지)이 주가 되고, 그 외의 요소는 비중이 작거나 거의 없게
• 판매를 겸하고 있더라도 직접적인 노출 기피
• 아티스트 소개, 포트폴리오, 작업 문의가 반드시 포함된 메뉴 구성

많은 사이트들을 분석하여 위와 같은 세 가지 특징을 정립했습니다. 이 특성을 기반으로 창작자들을 위한 템플릿. 즉, 블로그처럼 나라는 사람을 아카이빙하는 지극히 사적인 공간을 겸하면서 동시에 온라인 판매나 작업 문의와 같은 상업적인 공간도 있는 템플릿을 작업하게 되었습니다.

심플하지만 섬세한 템플릿

Cera — Mix는 전체적으로 심플하고 시원한 구성을 취하고 있습니다. 하지만 동시에 모든 창작자가 그러하듯 섬세하고 우아한 느낌을 잃지 않기 위해 노력했습니다.

컬러

• 작품의 색상이나 그 이미지 자체만 집중될 수 있도록 전체적으로 무채색(#555555, #404040)의 기조 색상
• 도자기에서 느껴지는 푸르고 은은한 색상(#c8cbd4)을 브랜드 컬러로 사용

폰트

• 제목 폰트: 명조 중에서도 개성이 있는 서체(Libre Baskerville)로 우아하고 섬세한 느낌을 유지
• 본문 폰트: 크기가 작고 옅게 사용되기 때문에 가독성이 높은 고딕(스포카 한 산스, Helvetica)으로 선택

메인

• 최근에 추가된 풀페이지 비주얼 기능을 활용하여 메인 페이지에는 오로지 작품과 작가만 중심이 되도록 디자인
• 각 슬라이드에 버튼을 넣어 서브 페이지로 이동 가능

쇼핑 (Store)

• 대량의 상품 판매가 이뤄지는 일반 쇼핑몰과의 차별성 인지
• 노골적인 가격 노출은 지양
• 쇼핑 위젯이 아닌 각 디자인 요소 위젯으로 도록 또는 브로슈어 같은 쇼핑 화면 디자인
• 각 위젯에 링크값을 넣어 클릭 시 구매가 가능한 상세 페이지로 이동

그 외 서브 (Artist, Work, Contact)

• 내용이 많지 않기 때문에 사방에 여백을 넓게 두어 시선이 페이지 중앙에 머물도록 디자인
• Work는 갤러리 위젯으로 이미지 업로드만으로 충분히 좋은 포트폴리오 페이지로 활용 가능하도록 디자인
• Contact 하위 메뉴로는 일반적인 공지와 문의 외에도 전시 정보와 작가에게 의뢰할 수 있는 입력폼이 포함
• 아코디언 게시판의 경우 주로 FAQ 게시판으로 활용되지만, 여기서는 전시 정보를 알리는 게시판으로 사용

모바일 편집

모바일은 PC와 달리 디스플레이 영역이 세로인데다가 넓이도 한정적입니다. 때문에 지나친 여백은 오히려 가독성을 해치는 요인이 됩니다.

때문에 대부분의 페이지에서 크고 작은 모바일 편집이 이뤄졌습니다.

상단

• PC에서는 상단에 배경색이나 선 없이도 여백 위젯을 통한 공간 확보로 본문과 구분에 문제가 없음
• 모바일에서는 디스플레이 크기와 비율이 다르기 때문에 상단과 본문의 명확한 구분이 필요
• 짙은 색상의 선으로 상단 영역을 명확하게 표시

메인 / 고정섹션

• 모바일 화면 비율에 맞게 비주얼 이미지 편집 및 모바일 전용 섹션으로 디자인
• 자유로운 구성을 위해 고정 섹션을 하단 섹션으로 사용
• PC에서 정한 줄바꿈이 모바일에서 어색하게 잘리는 경우를 방지하고자 모바일 전용 섹션으로 고정 섹션 디자인

그 외 서브

• PC에서 사용된 여백위젯 일부를 모바일에서 숨김

마치며

심플함을 오용한 사이트들은 엉성하거나 어딘가 미완의 느낌이 들죠. Cera — Mix를 작업하면서 심플한 디자인이란 공이 많이 들어간 디자인이라는 것을 다시 한 번 느꼈습니다. Cera — Mix가 아임웹을 유저분들이 최대한 본질(작품)에만 집중하실 수 있도록 활용도는 높되, 수정은 간편한 좋은 템플릿이 될 수 있길 바랍니다. Cera — Mix 많이 사랑해주세요 :) 감사합니다.

Cera — Mix 자세히 살펴보기

Mood

Main&Store