SKT Basic UI Component Guide Ver.1 (202303)

Components

Component는 UI를 생성하는데 가장 기본이 되는 단위입니다.
SKT Basic UI Component에서는 모바일 앱 내 사용 빈도가 높고 SKT 서비스에서 잘못 사용되는 경우가 많은 10 개의 UI component를 선정하여 소개합니다.

Actions

Action은 사용자가 원하는 기능을 작동할 수 있게 하는 component입니다.

Buttons

버튼은 사용자가 데이터를 전송하거나 기능을 실행하도록 하는 명령 컨트롤 (imperative control)입니다.

사용법

버튼과 힌트

버튼의 배치와 디자인 일관성

버튼 중요에 따른 UI 구분

버튼 상태(활성화/비활성화, On/Off)에 따른 UI 구분

버튼 활성화 조건

버튼 클릭 영역

UX Writing

명확한 표현을 위한 버튼 라벨 문구

Floating action buttons

FAB는 화면 내의 주요 액션이나 가장 많이 공통적으로 사용하는 액션을 위해 사용합니다.

사용법

FAB를 사용할 수 있는 액션 유형

FAB의 위치 선정

Navigation

Navigation component는 사용자가 UI 내에서 이동할 수 있게 합니다. Navigation의 종류와 작동 방법에 대해 확인하고 싶으시면, 아래 ‘Navigation의 종류 자세히 보기' 페이지를 참조하세요.

Navigation 의 종류 자세히 보기 >

Device back button (Android)

사용자가 직전에 방문했던 페이지로 돌아갈 수 있게 합니다.

사용법

Device back button의 동작

‘이전 페이지로 이동' 과 ‘상위 페이지로 이동’ 의 구분

Bottom sheet 에서의 device back button 동작

Navigation drawer

Navigation drawer는 앱 내의 원하는 페이지에 접근할 수 있도록 합니다.

사용법

Navigation drawer의 위치

Navigation drawer와 타 navigation component의 관계

Tabs

Tab을 통해 동일 레벨의 연관성 있는 컨텐츠를 그룹으로 조직화하고 탐색할 수 있습니다.

사용법

Tab 간 스와이프 이동 시 콘텐츠 영역 처리

Tab 간 스와이프 이동 시 UI 힌트

Tab 간 이동 방식의 일관성

Tab과 top app bar 함께 사용 시 인터랙션

브랜딩, 화면 타이틀, 네비게이션과 같이 현재 화면과 연관된 콘텐츠와 액션을 제공합니다.

사용법

네비게이션 버튼과 우측 액션 버튼 용법

스크롤 시 타이틀 인터랙션

타이틀 말줄임

Containment

Containment는 버튼, 메뉴와 같은 다른 component를 포함해 정보와 액션을 담고있는 component입니다.

Dialogs (Popup)

중요 정보를 제공하거나 의사결정을 요청하기 위해 앱 콘텐츠 위에 띄우는 모달 창의 일종입니다.

사용법

팝업 외 영역 비활성화

음영 영역 및 device back button 선택 시 팝업 동작

팝업 내 링크

UX Writing

팝업 타이틀 문구 - 모호한 문구

팝업 타이틀 문구 - 서비스 제공자 입장의 문구

팝업 버튼 문구

컨펌 팝업 중복 사용

Bottom sheets

사용법

Bottom sheet 닫기 - 음영영역 터치

Bottom sheet 닫기 - 스와이프

Bottom sheet 닫기 - device back button 선택

Bottom sheet 내 스크롤 - 힌트

Bottom sheet 내 스크롤 - 기존 영역 처리

Selection / Input

사용자의 결정 사항이나 텍스트를 입력/편집할 수 있도록 해줍니다.

Radio button / Checkbox

사용자가 여러개의 옵션 중 하나 또는 복수의 선택을 할 수 있도록 합니다.

사용법

체크박스와 라디오버튼 구분

선택된 항목 UI

Text fields

일반적으로 form이나 dialog의 형태로 많이 나타나며, 사용자가 텍스트를 입력할 수 있게 해줍니다.

사용법

UX Writing