[UIUX] 피그마 - 13장 뉴스 앱 디자인하기

2023-02-15 Wed

💡  이 기능들을 사용
Community(UI Kit), Layout Grid, Plugins(Feather Icons, Unsplash), Auto Layout, Component, Constraints

13.1 모바일 운영체제 이해하기

모바일 운영체제(mobile operating system)는 스마트폰이나 태블릿 PC 같은 디바이스들을 제어하고 앱을 실행해 주는 시스템 소프트웨어이다. 대표적으로 애플의 iOS와 구글의 Android가 있다.
모바일 앱을 디자인 하기 위해서는 각 운영체제의 특성과 개발 관련 지식은 꼭 알아 두어야 한다. 그래야 작업 범위도 가늠할 수 있고 개발팀과의 커뮤니케이션도 원활해지기 때문이다.

디스플레이 용어 이해하기

iOS나 안드로이드 운영체제를 탑재한 디바이스의 종류는 나날이 다양해지고 있고, 그만큼 스크린의 크기와 해상도, 픽셀 밀도, 비율의 가짓수 또한 많아졌다.
특히 디바이스의 해상도와 픽셀 밀도가 어떻게 되느냐에 따라 디자인 작업 환경이 달라지므로 각 개념은 꼭 숙지해야 한다.
아이폰 11 pro를 예로 들어, 디스플레이와 관련된 용어들을 알아보자.

• 스크린 크기: 화면의 대각선 길이를 말하고, 인치(inch)로 표기한다. 디바이스를 볼 때 스크린 크기와 해상도를 같이 알아 두면 어느 정도의 고해상도 화면을 탑재한 디바이스인지 알 수 있다.
  아이폰 11 pro의 경우 스크린 크기는 5.8"이다.

• 해상도: 화면에 보이는 픽셀의 총 개수이다.
  아이폰 11 pro의 해상도는 1125px x 2436px이다.

• 픽셀 밀도: 1인치 안에 픽셀이 얼마나 들어 있는지 나타낸다. (픽셀이 많을수록 고밀도가 되어 화면에 표현되는 요소가 선명하게 보임) 이 밀도는 dpi(Dots per inch)나 ppi(Pixels per inch)로 표기된다.
  아이폰 11 pro는 458ppi로 1인치 안에 458(width) x 458(height)개의 픽셀이 들어 있다는 뜻이다.

• 픽셀 비율: 표현되는 픽셀(물리적 픽셀)과 실제로 보여지는 픽셀(논리적 픽셀)의 비율을 말한다.
  아이폰 11 pro는 실제로 보여지는 픽셀인 375px x 812px에서 더 선명한 화면으로 보이기 위해 3배 더 큰 1125px x 2436px을 축소시켜 고밀도화했다. (여기사 3배가 픽셀 비율이 됨)

단위 개념 이해하기

안드로이드는 탑재되는 디바이스가 iOS에 비해 훨씬 다양하다. 각기 다른 화면 크기에서 어떻게 최적화된 레이아웃이 보일 수 있을까? (안드로이드의 단위 개념과 화면 밀도 체계를 이해하면 됨)
안드로이드와 iOS는 서로 비슷한 개념의 단위를 사용한다. 화면의 해상도가 달라도 하나의 요소가 디바이스마다 동일한 크기로 보이기 위해서 안드로이드는 DP(Device Independence Pixel), iOS는 PT(Points)라는 단위를 사용한다.
예를 들어 20dp x 20dp(20pt x 20pt)로 그려 넣으면 이 단위가 화면 밀도를 자동으로 계산해 해상도가 낮은 화면에서도, 높은 화면에서도 결국에는 같은 크기로 보인다. (여기서 절대적인 값인 픽셀(pixel)을 사용해 20px x 20px를 그려 넣으면, 해상도가 낮은 디바이스에서는 무난하게 보일지 몰라도 해상도가 높은 디바이스에서는 훨씬 작게 보일 것.)

픽셀 밀도 이해하기

픽셀 밀도도 해상도만큼이나 다양하다. 안드로이드는 픽셀의 밀도를 일정 수로 분류했다. 대표적으로 mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi가 있다. 여기사 mdpi(160dpi)는 1dp가 1px의 크기와 동일해 픽셀 비율이 1배이고, xxxhdpi는 그 기준의 4배이다. (이렇게 픽셀이 고밀도화될수록 화면은 더욱 선명하게 보임)
안드로이드는 탑재되는 디바이스 종류가 워낙 많기 때문에 해상도와 비율을 잘 고려해 화면을 그리고 리소스를 사용해야 한다. 보통은 폰트, 리소스크기, 여백 등 수치를 계산하기 쉽도록 1배 비율인 360px x 640px에 화면을 디자인한다.

iOS의 픽셀 밀도는 조금 더 간단하게 세 가지로 나뉜다. 시안은 1배 비율인 375px x 812px에 작업하고, 리소스는 1배, 2배, 3배 등 밀도의 가짓수에 맞춰 추출한다. 추출한 리소스는 ico-bell@2x.png처럼 파일명 뒤에 @1x, @2x, @3x를 붙여 밀도를 구분하고 있다.

13.2 뉴스 앱 디자인 준비하기

모바일 뉴스 앱을 디자인해 보자.
먼저 작업할 운영체제 선택 → 안드로이드와 iOS 모두 운영되는 앱의 경우에 접속률이 더 높은 운영체제를 먼저 디자인해도 되고, 디자이너의 기호에 따라 혹은 기존 작업 방식에 따라.
가정) 20~30대가 주로 사용, iOS 유입률이 좀 더 높음
= 375px x 812px를 기준으로 먼저 디자인
iOS 디자인이 모두 끝난 다음 안드로이드도 대응하기.

13.3 상태 바, 홈 인디케이터 넣기

모든 디바이스에는 최상단에 시간과 배터리 상태를 알려 주는 상태 바(status bar)가 있다. 아이폰의 경우 아이폰X부터 홈 버튼이 없어지고, 최하단에 바 형태의 홈 인디케이터가 생겨났다.
앱을 디자인할 때는 실제 모바일에서 보는 느낌을 더해 주기 위해서 이러한 UI 요소들도 시안에 담겨 있는 게 좋다.
이때, 피그마 커뮤니티에 있는 UI 키트(Kit)를 활용하면 편리함

활용 방법

1) 파일 브라우저로 이동해 왼쪽 사이드바의 Community 클릭
2) 검색창에 'iOS Browser UI Kit' 검색하여 우측 상단 'Duplicate' 클릭
*파일은 왼쪽 사이드바의 Drafts에서 찾을 수 있다.
3) iOS Browser UI Kit 파일이 열리면, 프레임명 'statusbar/iPhone X dark background' 상태 바와 'home indicator light on dar'의 홈 인디케이터를 선택하여 복사

뉴스 앱 프레임

1. 툴바에서 Frame을 선택한 뒤, 오른쪽 속성 패널에서 'iPhone 11 Pro/X'를 클릭한다.

2. 375px x 812px 프레임이 만들어지면 Fill 패널에서 배경색을 '222'로 변경한다.

3. 프레임명은 'News App'으로 설정한다.

4. 상태 바와 홈 인디케이터를 붙여넣기 하는데, 상태 바는 프레임의 상단에, 홈 인디케이터는 하단에 위치시킨다.

안전 영역 고려해 디자인하기

아이폰X부터는 디바이스의 테두리 두께(베젤)가 매우 얇아지고, 디스플레이 상단에 카메라, 스피커, 센서가 있는 노치(notch)가 생겼다. 아이폰뿐만 아니라 다른 종류의 디바이스들도 이러한 스타일을 따라가는 추세다. 이제는 앱 디자인을 할 때 필수적으로 안전 영역을 고려해야 한다.
안전 영역(Safe area)은 둥근 모서리와 상태 바, 홈 인디케이터에 화면이 가려질 염려 없이, 온전히 잘 보여지는 영역을 말한다. 앱 디자인을 할 때는 의도한 레이아웃이 잘 나타나도록 이 안전 영역을 고려해 디자인하는 것이 중요하다.

13.4 하단 탭바 디자인하기

앱 하단에는 여러 주요한 메뉴를 옮겨 다닐 수 있도록 하는 하단 탭바가 존재한다.
iOS에서는 탭바(tab bar)로, 안드로이드에서는 하단 내비게이션 바(bottom navigation bar)로 불리는 이 메뉴는 시인성(모양이나 색이 눈에 쉽게 띄는 성질)이 높고, 엄지손가락이 닿기 쉬운 위치에 있어서 메뉴의 접근성이 높다.

탭바 프레임 (홈, 탐색하기, 북마크, 설정 탭)

1. 375px x 94px 프레임 화면 하단에 위치, 색상은 444, 프레임명은 'UI/Tabbar'로 설정

2. 탭은 총 4개이므로 전체 가로 너비를 4등분해 줘야 함

3. 'UI/Tabbar'프레임 선택 → Layout Grid 추가 → 속성은 Columns → Count는 4 → Gutter는 1 (=컬럼 4개가 생성됨, 하나의 컬럼이 탭 한 개가 되는 것임)

각 탭 프레임

1. 크기 93px x 60px의 프레임을 홈 인디케이터바 바로 위에 생성, 프레임명은 'UI/Tab'으로 설정

2. '홈' 탭의 아이콘 넣기 (마우스 우클릭 → Plugins → Feather Icons → "home" 아이콘을 'UI/Tab' 프레임에 드래그 앤 드롭

3. 아이콘은 상단에서 12px, 가로는 중앙 정렬, 색상은 fff로 설정

4. 탭 라벨 추가 (텍스트 박스 추가 '홈' 입력) → 아이콘과의 간격(상하)은 4px로 설정

5. 'UI/Tab' 홈 탭을 복사해 탐색하기 탭도 만들어 준다. (Feather Icons 플러그인에서 "Globe" 형태로 교체, 탭 라벨은 '탐색하기'로 변경, 색상은 999, 탭 라벨은 Bold에서 Regular로 변경)

여기서 홈 화면을 디자인하는 것이기 때문에 나머지 메뉴는 불이 꺼진 듯한 느낌을 줘 비활성화 상태를 표현해 줌으로써 선택된 메뉴와 선택되지 않은 메뉴를 구분해서 보여준다.

6. 북마크 탭과 설정 탭도 '탐색하기'탭과 동일한 과정으로 만든다. (Bookmark, Setting icon)
   
   

13.5 타이틀 영역 디자인하기

화면의 기본 여백 설정

뉴스 앱의 양옆 여백 24px, 레이아웃 그리드로 여백 표시하기

1. News App 프레임 선택, 속성 Columns, Count 1, Margin 24, Gutter 0 으로 설정

뉴스 앱의 홈 화면 (오늘의 날씨, 옷차림 추천 코멘트)

1. 상태 바에서 30px 밑으로 문구 "날씨가 쌀쌀해요. 가벼운 자켓을 걸쳐보세요." 삽입
   (텍스트 상자의 너비는 260px, 높이는 Text 패널에서 'Auto Height'로 설정)
2. 상태 바에서 28px 밑으로, 크기는 44px x 44px로 늘려, 타이틀 옆에 구름 아이콘 삽입 (Feather Icons 플러그인 → 'weather' 검색)
3. 구름 아이콘 더블 클릭 → Vector 선택 → 색상 699CF8, 두께 4 설정
   
   
   

13.6 가로 스와이프 뉴스 디자인하기

이 뉴스 앱에는 두 종류의 뉴스 영역이 존재한다.
상단에는 가로 스와이프해 살펴볼 수 있는 '관심 주제'의 뉴스가 있고, 하단에는, 세로 스크롤해 보는 '새로운 뉴스'가 있다. 서로 방향이 다른 가로 스와이프와 세로 스크롤 특징들을 유의하며 뉴스 영역을 디자인해야 한다.

'관심 주제' 타이틀

1. 옷차림 코멘트에서 30px 밑으로 '관심 주제' 텍스트 추가, 오른쪽에는 업데이트된 뉴스의 개수를 표시하는 배지에 '5'를 입력

2. 숫자 배지에는 배경을 추가 / 숫자의 자릿수가 늘어나면 배경도 같이 늘어나야 하므로 오토 레이아웃을 적용

3. 관심 주제 와의 간격은 6px로 설정 / 제목은 나중에 변경될 수도 있으므로 어떤 길이의 제목이 와도 간격이 유지될 수 있도록 '관심 주제'와 배지를 함께 선택하여 오토 레이아웃을 한 번 더 적용

뉴스 카드

뉴스 카드에는 기사의 주제를 나타내는 아이콘과 기사 제목, 기사 본문의 일부가 박스 형태에 담긴다. 뉴스 카드 상단에 주제 아이콘 배치함으로써 뉴스의 주제를 한눈에 파악 / 뉴스마다 아이콘이 들어갈 것이므로 컴포넌트로 관리한다. 그러면 다른 주제로 바뀔 때 아이콘을 교체하기가 한층 간편해질 것이다.

1. '관심 주제' 타이틀 밑으로 14px 떨어진 곳에 카드 배경인 240px x 250px 프레임 생성

2. 컴포넌트로 만들어질 아이콘은 한곳에서 관리하면 수월하므로, 별도의 프레임 생성

• News App 프레임 옆에 400px x 200px 프레임을 만든 후, 레이어명은 'Masters'로 지정, Ellipse 를 선택하여 50px x 50px의 원 생성, 주식에 맞는 아이콘 'activity' 추가, 색상 fff, 배경과 아이콘 그룹 짓기, 그룹명 'Icon/Stock'
• 같은 과정으로 두 개 더 만들기
  (비즈니스 주제 - 아이콘 'briefcase', 색상 0FAA58, 그룹명 'Icon/Business')
  (영화 주제 - 아이콘 'film', 색상 FFC700, 그룹명 'Icon/Movie'

3. 아이콘을 모두 선택한 뒤, 툴바에서 컴포넌트 아이콘 옆 '화살표'를 클릭하여 'Create Multiple Components' 메뉴를 클릭해 한꺼번에 컴포넌트로 전환

4. 뉴스 카드로 다시 돌아가 주식 주제 아이콘을 카드 왼쪽 상단을 기준으로 20px씩 떨어진 곳에 복붙하기

5. 뉴스의 타이틀 적기 좌우 여백은 20px, 카드의 상단에서 100px 떨어진 곳에 '홍콩 증시 경제활동 재개...'를 입력

6. 뉴스의 본문 적기 타이틀과 마찬가지로 좌우 여백 20px, 타이틀에서 8px 밑으로, '뉴욕 증시가 주말에 강세를 보이고 미중 무역협상 대표가 전화회담을 열어 1단계 무역합의 이행에 노력하기로 의견을 모은 것도 매수 안도...' 입력

7. 카드 전체 선택 후 우클릭 'Create Component' 클릭, 컴포넌트명 'UI/Card-1', 만들어진 UI/Card-1 컴포넌트를 선택한 뒤 [opt]를 누른 채 드래그 앤 드롭으로 복제, 첫 번째 컴포넌트와의 간격은 16px으로 설정

8. 두 번째 카드는 비즈니스와 관련된 뉴스이므로, 아이콘을 클릭 후 Instance 패널에서 'Stock'으로 표시되는 부분을 클릭해 'Business' 선택

9. 타이틀과 본문만 수정하고 교체하면 가로 스와이프 뉴스 디자인 끝.

13.7 세로 스크롤 뉴스 디자인하기

새로운 뉴스 영역은 최신 뉴스를 모두 보여 주는 공간이다. 관심 주제 뉴스는 가로로 스와이프하면서 간편히 살펴보는 영역이었다면 새로운 뉴스영역은 화면 전체를 스크롤 해야 한다. 뉴스양이 많아질수록 스크롤의 길이도 길어진다. 작업 순서는 앞서 만든 관심 주제 뉴스와 비슷하다.

1. '관심 주제' 타이틀을 뉴스 카드 30px 아래에 복붙, 텍스트를 '새로운 뉴스'와 업데이트 개수는 '6'으로 변경

2. 타이틀 12px 아래에 327px x 330px 프레임을 만들고 프레임명은 'UI/Card-2'로 지정, 뉴스 내용이 화면을 넘칠 수 있으므로 'Clip content' 체크

3. 그 안에 사진이 들어갈 327px x 180px 프레임 하나 더 생성, 배경 프레임을 기준으로 상단에 위치, 프레임명은 'Image'로 입력, 플러그인 Unsplash 'Robot' 검색하여 이미지 넣기

4. 하단 탭바에 카드가 가려져 타이틀과 본문 삽입이 쉽지 않으므로 News App 프레임 오른쪽으로 살짝 카드를 빼고 작업이 끝나면 다시 화면 안으로 넣어줌
   '관심 주제' 뉴스 카드에 넣었던 타이틀과 본문 복제, 너비는 287px로 수정, 좌우 여백 20px, image 14px 밑으로 타이틀, 타이틀의 8px 밑으로 본문 텍스트, 텍스트 본문은 배경 프레임 기준 하단 18px 여백

한 화면에서 고려되어야 하는 여러 상황

화면을 로딩하거나 갑자기 인터넷이 끊기거나 하는 상황에 대처하는 화면들도 준비해 두어야 사용자들에게 지속적으로 좋은 경험을 제공할 수 있다. 앱을 켰을 때부터 뉴스를 보기 전까지의 흐름을 머릿속에서 스토리보드 그리듯 상상하고, 필요한 화면과 요소들을 발견해야 한다.

• 로딩 화면
• 스크롤 내렸을 때의 화면 변화
• 에러 화면(인터넷 연결 실패, 대표 이미지 불러오기 실패 등)

13.8 안드로이드 대응하기

iOS 시안 작업이 끝났으니 안드로이드 화면에도 대응해야 한다.
어떤 부분을 가변영역으로 하고, 고정으로 할지 잘 고려해 디자인하는 것도 중요하지만, 실제 구현하는 것은 개발팀이므로 이 사항들을 온전히 전달하는 것도 매우 중요하다.
이때 피그마의 컨스트레인트를 활용하면 개발자가 직접 프레임의 크기를 자유자재로 변형해 보며 영역의 특성을 파악할 수 있다.

1. News App 프레임을 복제한 뒤, 프레임명을 'News App - Android'로 변경

2. 컨스트레인트 적용

• 코멘트 텍스트 - 좌우 여백 값은 변하지 않고, 텍스트 상자 너비만 가변적으로 변하는 영역
  : 가로는 Left&Right, 세로는 Top

• 날씨 아이콘 - 크기 변합없이 오른쪽에 위치 고정
  : Right, Top

• '관심 주제', '새로운 뉴스' 타이틀, 가로 스와이프 뉴스 - 텍스트가 그다지 길지 않기 때문에 전체 프레임 크기에 큰 영향을 받지 않음 + 가로로 넘기면서 보는 영역이기에 화면 크기가 줄거나 늘 때 크기나 위치에 변화를 주지 않아도 됨
  : Left, Top

• 세로 스크롤 뉴스 - 이 뉴스 카드의 경우 해상도가 커지면 좌우 여백을 제외하고, 이미지와 텍스트가 포함된 카드 영역은 같이 늘어나야 함(화면 크기가 가로로 커질 때 뉴스 카드의 세로 높이는 고정인 채로 가로로 같이 커짐), 그렇기에 UI/Card-2와 Image 프레임, 각 텍스트에서
  : Left&Right, Top

• 하단 탭바 - 탭바의 전체 너비가 어떤 해상도에서든지 100%가 되어야 하고, 화면의 하단에 놓여야 하므로 UI/Tabbar 프레임은,
  : Left&Right, Bottom

• 탭 - 탭 하나의 가로 너비는 전체 너비의 1/4인데, 화면의 크기가 변해도 1/4을 유지할 수 있도록 해줘야 함
  : Left&Right, Top

• 탭 내 아이콘과 탭 라벨 - 항상 가로 중앙에 위치하도록 해야 함
  : Center, Top

3. 해상도를 변경하여 컨스트레인트가 잘 적용됐는지 확인하기
   (News App - Android 프레임 선택 후, 우측 속성 패널에서 'Frame'을 클릭, 'Android' 클릭 후 프레임의 크기를 360px x 640px로 변경

4. 컨스트레인트를 적용하면 이렇게 다른 해상도에서도 간단하게 시안을 확인할 수 있다.

안드로이드용 UI로 변경하기

상태 바와 홈 인디케이터는 iOS용으로 되어있으니 이 두 개도 안드로이드 용 UI로 변경해 보자.
iOS는 아이폰에만 탑재되기 때문에 정해진 상태 바의 모양이 있지만, 안드로이드 디바이스는 매우 다양한 모양의 상태 바가 쓰인다. 여기서는 구글에서 제공하는 Material Dark Theme Design Kit에서 상태 바를 가져온다.

• 피그마 커뮤니티: Material Dark Theme Design Kit 검색 → Duplicate 클릭
• 파일 오픈 → Components 페이지의 Elements 프레임 속 System bar 마스터 컴포넌트 복사
• 작업하던 News App - Android 프레임 상단에 붙여넣기 → 아래 영역들과의 간격을 30px로 조정
• 맨 하단에 있던 홈 인디케이터 삭제 → 하단 탭바 UI/Tabbar 프레임의 높이 66px로 수정

안드로이드 대응까지 모두 완료했다. 컨스트레인트를 적용하여 다른 디바이스의 화면 크기로도 자유롭게 변형할 수 있다.