위젯 디자인 가이드 / UI 컴포넌트
개요
위젯 디자인시 공통적으로 사용할 수 있는 표준 UI 컴포넌트를 제안하고, 사용 예를 설명합니다.
다운받기 버튼을 클릭하시면 UI 컴포넌트 소스 파일을 다운로드 할 수 있습니다.
본 페이지에서 제공되는 디자인 리소스는 사용 목적에 관계없이 자유로운 이용 및 수정이 가능합니다.
타이틀 바
현재 페이지의 위치를 나타내고, 홈페이지로 쉽게 이동할 수 있는 링크를 제공합니다.
적용조건
- 여러 종류의 서비스를 제공하는 위젯의 경우 다른 위젯/페이지와 명확히 구별짓기 위해 사용합니다.
적용방법
- 각 페이지에서 같은 크기의 높이를 적용하여 사용자가 쉽게 적응할 수 있도록 합니다.
- 각 페이지마다 배경색을 다르게 적용하여 현재 사용자의 위치를 쉽게 알 수 있도록 합니다.
- 매 페이지 나오는 부분이므로 너무 높은 크기를 사용하지 않도록 합니다. (40px 이하 권장)
예시
탭
위젯 내에서 몇가지의 명확히 다른 콘텐츠를 보여줄 필요가 있고, 현재 어떤 콘텐츠를 선택하였는지를 나타내 줄 필요가 있을 때를 위해 고안되었습니다.
적용조건
- 2~6개의 제목이 존재할 경우 사용할 것을 권장합니다. (3~4개가 가장 적당합니다.)
- 성격이 확연히 다른 두 개 이상의 카테고리를 배치할 경우 사용합니다.
- 다른 탭을 클릭함으로써 아래 내용이 화면전환이 될 경우 사용합니다.
적용방법
- 탭의 이름은 충분히 짧게, 한 번에 알아볼 수 있는 단어를 사용합니다.
- 선택되어 있는 탭과 선택되지 않은 탭을 시각적으로 명확히 구분지어줍니다.
- 탭은 두 줄이 되어서는 안되고, 한 줄에 들어갈 수 있도록 단어를 짧게 짓거나 개수를 줄입니다.
- 탭 이름 뿐만 아니라 탭 전체를 클릭 가능하게 링크를 걸어줍니다.
예시
리스트
여러 개의 항목을 한 가지 방식으로 표시할 경우에 사용됩니다.
적용조건
- RSS, 뉴스, 잡지기사, 이메일, 검색결과 등 동일한 형식의 콘텐츠를 나열해야 할 경우 사용합니다.
적용방법
- 제목은 다른 콘텐츠보다 부각될 수 있도록 글자를 두껍게 표시하거나(bold), 진한 색상을 사용합니다.
- 현재 선택하고 있는 항목을 다른 항목과 구분할 수 있도록 rollover효과를 추가합니다.
- 리스트 항목 사이에는 구분선을 두거나, 충분한 간격을 주어 각 항목들을 명확히 구분합니다.
예시
페이지네이션
쉽게 다른 페이지로 이동할 수 있도록 돕습니다.
적용조건
- 리스트가 여러 페이지에 걸쳐 있어서 페이지간 이동 기능이 필요할 경우에 사용됩니다.
적용방법
- 이전 페이지 버튼과 페이지 버튼, 다음 페이지 버튼을 나란히 나열하도록 합니다. 더 창의적인 방법을 이용하여도 됩니다.
- 만약 현재 페이지가 1페이지인 경우 이전 페이지 버튼을 disable된 느낌이 들도록 디자인합니다.
- 표시되는 페이지의 개수는 5개 ~ 10개 정도로 합니다.
- 현재 페이지를 명확히 표시합니다.
