<주간 UIUX 디자인 : ui ux 가이드>

모바일/PC 디자인 시 꼭 고려해야할 UI UX 가이드

제로베이스 UIUX 디자인 스쿨

🤔 UI 디자인을 할 때는 무엇을 고려해야 할까요?

UI(User Interface) 디자인은 사용자가 서비스와 상호작용하는 접점을 디자인하는 일이에요. 디지털 서비스의 경우 주로 디바이스의 디스플레이에 노출되어 사용자에게 도달되죠. 모바일, PC, 키오스크, 카플레이, 텔레비전 등을 예로 들 수 있어요. 여기서 중요한 것은 인터페이스가 담기는 디바이스들 전부 다른 방식으로 작동하고 이용된다는 점이에요. 따라서 사용자 경험을 증진시키기 위해서는 디바이스를 고려해 UI 디자인을 할 필요가 있답니다. 같은 서비스더라도 사용자가 디바이스와 어떻게 상호작용하는지, 어떤 맥락으로 활용되는지 등을 이해하고 접근해야 하죠.

오늘은 대표적인 디지털 디바이스인 모바일과 PC를 기준으로 UI 디자인 시 고려해야 할 점을 각각 알아볼게요!

모바일/PC 기기에 따라 달라지는 UI 디자인 특징을 알아봐요.

서비스의 성격이나 목적에 따라 다르겠지만, 이전에는 PC용 UI를 우선 디자인하고 모바일에 맞췄다면 요즘은 모바일용 UI를 PC에 적용하는 추세예요. 그만큼 모바일의 사용 비중이 늘었음을 의미해요.

우선 모바일 기기의 특성부터 알아볼까요?

1) 디스플레이 크기

모바일은 디스플레이의 크기가 작아요. 한 화면에 담을 수 있는 정보의 양이 한정되고 정보나 태스크가 너무 많을 경우 사용자가 쉽게 피로감을 느낄 수 있어요.

2) 상호 작용 방식

사용자가 탭, 스와이프, 핀치 등의 제스처를 손가락으로 수행하며 모바일 기기와 상호작용해요.

3) 집중도

이동시, 멀티태스킹 시 모바일을 많이 활용해요. 출퇴근 길에서, 자기 전에 침대에 누워서 휴대폰 많이 사용하시죠? 모바일은 장소의 구애를 받지 않고 어디서든 사용할 수 있어요. 상시적으로 쓰기 좋지만 모바일 기기를 사용할 때 집중력이 비교적 떨어진다고도 볼 수 있어요.

위 특성들을 고려해 모바일 UI 화면을 디자인하려면 아래 사항들을 지키는 것이 바람직해요.

🧭 UI UX 디자인 가이드: 모바일 UI 디자인

1) 내비게이션 바 (Navigation bar)

서비스의 구조는 간단하게, 정보도 명료하게 표현하는 것이 중요해요. 모바일 UI의 대표적인 내비게이션 구조로 바텀 내비게이션 바(🗣 iOS는 탭 바라고 불러요!)를 꼽을 수 있는데요, 하위 메뉴들을 숨기되 메뉴의 구성과 전환을 직관적으로 보여줄 수 있어요.

2) Thumb zone과 touch target

사용자가 손으로 기기를 들고 주로 엄지 손가락으로 모바일 기기를 사용하기 때문에 ‘thumb zone’과 ‘touch target’의 크기를 고려해야 해요. 먼저 ‘Thumb zone’은 화면상 손가락을 뻗어 편하게 닿을 수 있는 범위를 뜻해요. 화면의 아랫부분이 접근성이 좋기 때문에 모바일에서는 바텀시트 UI를 많이 활용한답니다. 또한, 버튼이나 리스트 등 사용자가 누르는 ‘touch target’의 크기는 화면에 닿는 손가락의 면적보다 커야해요.

3) 스크롤 (scroll)

많은 양의 콘텐츠를 보여주는 경우 세로/가로 스크롤 UI를 적극 활용할 수 있어요. SNS에서 피드형 UI나 숏츠 형태의 UI가 유행하게 된 것도 모바일에서 스크롤이 용이하기 때문이에요. 쇼핑몰 상단에 가로로 롤링되는 배너 UI도 같은 맥락으로 볼 수 있어요.

이제 모바일과 상반되는 PC 기기의 특성들을 살펴볼게요!

1) 디스플레이 크기

디스플레이의 크기가 모바일이나 태블릿에 비해 비교적 커요.

2) 상호작용 방식

사용자는 키보드, 마우스, 트랙패드 등 보조 수단들을 활용해 PC 기기와 상호작용해요.

3) 집중도

보통 고정된 자리에 앉아서 서비스를 이용해요. 모바일에 비해 몰입해서 서비스를 활용할 가능성이 커요.

🧭 UI UX 디자인 가이드: PC UI 디자인

1) 내비게이션 (Navigation)

PC는 무엇보다 넓은 화면을 효율적으로 사용하기 위해 어떤 레이아웃이 적합할지 고민하는 것이 중요해요. 메인 내비게이션 메뉴는 숨기기보다 노출하는 경우가 많아요. 따라서 2단, 3단 구조가 많이 쓰이는 편이에요.

2) 텍스트 가독성

텍스트 위주의 정보성 콘텐츠의 경우 본문의 너비를 조절해야 해요. 너비가 너무 넓으면 가독성을 해치기 때문이에요. Baymard Institution 연구에 따르면 보통 한 줄에 50~75자의 글자가 읽기에 적당하다고 해요.

3) 반응형 웹 (Reponsive Web)

반응형 UI로 디자인하는 것이 좋아요. 특히 PC 웹의 경우 디스플레이 크기가 제각각임은 물론이고, 분할화면을 사용하거나 창의 크기를 조절해 쓰는 경우가 많기 때문이죠.

잠깐! 이것까지 알면 UI UX 디자인 가이드 완벽 이해! 😎

디바이스의 OS도 고려하세요!

'안드로이드폰 쓰다가 아이폰으로 바꾸면 적응하기 어렵다, 한 번 아이폰에 익숙해지면 다른 거 못쓴다'는 말들 많이 들어보셨죠? 이건 OS 별로 사용되는 컴포넌트, 버튼의 위치, 내비게이션 형태 등이 다르기 때문이에요. 사용자에게 익숙하고 쉬운 서비스를 제공하기 위해서는 그들이 쓰는 디바이스의 OS도 고려할 필요가 있어요.

안드로이드 폰은 구글의 ‘Material Design’, 아이폰은 애플의 ‘Human Interface Guideline’을 토대로 내이티브 앱이 디자인되고 있어요. 주기적으로 업데이트되기 때문에 UI 디자인 시 도움이 되는 것은 물론 최신 동향을 파악하기에도 좋아요.

UI UX 디자인을 시작한 주니어 디자이너라면, 혹은 UI UX 디자이너를 꿈꾸는 분들이라면! 디자인 시작 전 이 가이드를 반드시 참고하시길 바랍니다. 이번 주간 UI UX 디자인은 이렇게 마칠게요! 안녕!

UIUX 디자이너의 꿈을
이룬 이야기도 만나보세요.