티스토리 뷰

스타일가이드 제작하기

스타일가이드 작성 이해

수립된 디자인 컨셉트와 앱 개발 계획을 바탕으로 스타일가이드를 제작할 수 있다.

스타일가이드(style guide)의 작성

스타일가이드란 모바일 앱 화면의 디자인 요소들을 규정한 표준 문서를 말하는 것으로, 일관되고 통일성 있는 UI를 지속해서 유지, 관리하기 위한 것이다. 스타일가이드에는 디자 인 개발 중 계속해서 사용하게 되는 디자인 요소들에 대한 지침서로써 활용되며, 용어 사 용에서는 표준화가 되어 있지 않은 실정으로 UI 디자인가이드, 개발가이드, 스타일가이드 등으로 혼용되고 있다.

모바일 앱 스타일가이드 작성 목적

스타일가이드의 목적은 사용자에게 일관된 사용자 경험을 전달하기 위해 여러 화면에 대 한 스타일과 형식을 같게 적용할 수 있는 디자인 표준안을 규정하기 위한 것이다. 이러한 GUI의 일관성을 기반으로 전체 콘텐츠에 대응하는 비주얼 디자인을 구현하게 되면 효율 적인 유지관리는 물론이고, 서비스 확장 시에도 일관성을 유지할 수 있다. 앱 스타일가이 드는 서비스의 운영과 함께 지속해서 업데이트되는 과정을 거치기 때문에 체계적으로 발 전시킬 수 있게 된다.

GUI 스타일가이드 구성요소

GUI 스타일가이드를 구성하는 요소에는 UX 디자인 콘셉트를 바탕으로 정의하게 되는 컬 러, 타이포그래피, 그래픽 요소, 메뉴와 버튼 등이 포함된다. 사용자에게 일관된 사용자 경험(User Experience)을 제공하기 위해 다음의 GUI 스타일가이드 구성요소를 정의하여 반복적이고 체계적으로 활용할 수 있도록 하여야 한다.

GUI 스타일가이드 작성 시 고려사항
  • 타깃 사용자 그룹의 특성
    • 실제앱을사용하게될타깃사용자그룹의특성과성향, 디자인선호도등을고려해 야 한다. 타깃 사용자가 누구인가, 나이, 숙련도, 문화 등에 대해 충분한 이해가 바탕 이 되어야 한다. 특정한 연령대에 집중적으로 사용자층이 형성된 경우에는, 해당 연령 층의 시각적 특성 파악을 통해 적합한 가이드라인이 마련되어야 한다. 예를 들어 주요 사용자층이 40대~50대에 해당하는 경우와 20대~30대에 해당하는 경우가 있다고 가 정할 경우, 이 두 그룹에 대한 스타일가이드는 그 구성이 서로 달라야 한다는 것이다. 또 앱의 비주얼 디자인으로부터 전달되는 느낌이나 분위기도 타깃의 선호도에 부합될 수 있도록 구성하여야 한다.
  • 사용 목적 및 상황 이해
    • 정보전달 목적
    • 상업적 목적
  • 앱 아이덴티티(identity)
    • 해당 앱의 아이덴티티를 사용자에게 전달하기 위해서는 서비스의 기술적 측면, 콘텐츠 및 정보설계 측면, 디자인 측면의 구성요소가 일관된 방향으로 스타일가이드에 표현되 어 시각적으로 명확하게 표현하여야 한다. 아이덴티티는 앱의 로고뿐만 아니라 컬러, 아이콘 등 여러 디자인 요소에서 하나의 콘셉트를 가져가는 것이 중요하다. 즉, 앞서 정의된 디자인 콘셉트의 연장선 개념으로 스타일가이드를 작성해야 한다. 예를 들어 스마트 문화 콘텐츠 앱의 콘셉트가 양질의 서비스 제공이나, 큐레이션(curation) 서비 스및차별화된서비스제공, 신뢰감, 다양하고풍부한즐거움등에서어느하나에해 당할 경우, 이를 시각적으로 표현할 수 있는 스타일가이드를 통해 앱의 아이덴티티를 만들어 낼 수 있다. 앱 아이덴티티는 사용자들이 앱의 비주얼 디자인을 통해 받는 어 떤 느낌이나 분위기라 할 수 있으며, 이러한 느낌이나 인상이 일관된 사용 경험으로 이어지게 될 경우 사용자들은 앱에 대해 차별화된 이미지를 형성하게 되며, 다음과 같 은 긍정적인 영향력을 갖게 될 수 있다.
  • OS 별 가이드라인
    • 주요 모바일 운영체제(OS) 제작사들은 모두 해당 OS를 위한 디자인을 규정하고 있다. 애플 OS X와 iOS에 대한 가이드라인을, 구글은 머터리얼 디자인(material design) 가이 드라인을 제공하고 있다. 이러한 디자인 가이드라인은 해당 OS의 운영 방식에 기반을 둔 내용이기 때문에 소프트웨어의 구현을 쉽게 도와주는 장점을 제공하지만, 반면에 디자이너의 입장에서 상당히 제약을 주기도 한다. 따라서 GUI 스타일가이드 작성 시 앞선 내용의 타깃 사용자 그룹의 사용자 경험을 고려하는 것을 중심으로 작성해야 한다.

UI/UX Design

UI/UX 환경 분석

UI/UX 계획 수립

사용자 리서치

UI/UX 요구 분석

UI/UX 콘셉트 기획

UI 아키텍쳐 설계

댓글
댓글쓰기 폼