오예🎉 오늘 금요일
오늘의 계획 ✅
(과제 있는 줄 모르고있다가 발등에 불 붙음)

그럼 TIL 시작🤓

📌

1. 다양한 환경에 대한 UI 차이 이해
2. 분기점과 그리드
3. 반응형과 적응형
4. 정보구조도와 플로우차트
5. 와이어프레임
6. 그리드 그리기 실습

1. 다양한 환경에 대한 UI 차이 이해

웹과 앱

웹과 앱의 특징

UI 차이에 따른 고려사항

- 잘못된 경로

주소창에 URL을 입력하여 어디든 접근할 수 있는 웹의 특성상 로그인 여부로 접근할 수 있는 화면이 차이가 난다.

사용자가 잘못된 화면에 접근했을 경우, 잘못된 접근이라는 것을 알려주고 정상적인 화면으로 이동할 수 있도록 해야한다.

- 뒤로 가기

앱의 경우 화면 상단의 버튼을 클릭하여 이전 화면으로 이동해야한다.
반면, 웹의 경우 브라우저의 자체 기능을 사용하여 이전 화면으로 돌아가는 것이 자유롭다.

만약 결제나 예약과 같은 페이지에 뒤로가기를 통해 다시 접근을 했다면 결제가 2번 이뤄지거나 취소가 여러번 되는 등 문제가 생길 수 있다.

- 주요 메뉴 이동

웹사이트들은 상단에 메뉴나 네비게이션을 위치시키지만 앱은 주로 화면의 하단에 위치한다.

최근의 모바일 웹들은 앱의 UI를 따라가는 경향이 있다. (사용자가 제품을 더 편하고 쉽게 사용할 수 있는 방향으로 수렴)

- 바텀 시트

💡 바텀 시트

화면 하단에 고정되어 현재 화면과 관련된 옵션이나 메뉴를 제공하는 UI

앱에서는 바텀시트를 다양한 용도로 활용이 가능하지만 모바일 웹에서는 사용하기가 까다롭다.

웹브라우저의 기본 UI가 있기때문에 스크롤의 영향을 받아 바텀시트의 위치가 계속 바뀌게 된다.
(앱에서 가능한 인터렉션이 웹 브라우저에서 사용하기가 어렵다.)

OS 별 차이

💡 운영체제 Operating System

앱이나 프로그램을 실행하는 배경이 되는 시스템
iOS, 안드로이드 / MacOS, 윈도우 (데스크탑)

- 앱 심사 가이드라인

앱은 앱스토어나 플레이스토어 같은 앱마켓에 등록해야 사람들이 설치하고 사용할 수 있다.

따라서 앱 마켓에서 제시하는 심사 가이드라인을 따라야한다.

가이드라인에 맞지 않는 부분이 있다면 심사에서 거절당하는 경우가 있다.

ex.
아이폰의 경우, 다른 로그인 수단 (카카오, 네이버 로그인) 만큼 애플 로그인도 강조한다.
소셜 로그인 방법이 있다면 애플 로그인도 포함시킨다.

- 홈 인디케이터 (Home Indicator)

아이폰에서 홈 화면으로 이동할 수 있는 UI

이전 아이폰 모델의 경우 홈버튼이 물리적으로 존재했지만 최신 모델의 경우 홈 버튼이 없고 홈 인디케이터가 있기 때문에 같은 아이폰 앱이라도 차이를 고려해야한다.

- 안드로이드 네비게이션 바의 뒤로가기

안드로이드의 경우 뒤로 가기 버튼이 기본 UI로 제공된다.

💡뒤로 가기

• 이전 화면으로 가기 (History Back)
  ex. 메뉴 선택 > 시간 선택 > 날짜 선택 > 인원 수 선택

• 상위 화면으로 가기 (Hierarchy Back)
  ex. 상품 디테일 화면 > 셔츠 목록 화면 > 상의 화면

(왼쪽 - 홈 인디케이터, 오른쪽 - 네비게이션 바)

💡

UI에 차이를 둔다는 것은 사용하는 목적과 상황을 고려해야한다는 것이다
어떤 디자인이 사용자에게 최선의 결과를 제공할 수 있을지 고민하는 과정이 필요하다.
UI의 목적과 기능에 대해 잘 숙지하고 사용자를 관찰해야한다.

2. 분기점과 그리드

분기점 (Break Point)

디스플레이의 해상도에 따라 각각 다른 화면을 보여주기 위한 기준점

스마트폰, 태블릿, 데스크톱, 노트북 등 다양한 디바이스로 웹사이트에 방문한다.
이때, 디바이스의 화면 크기에 따라 다른 디자인을 보여줘야한다.
사용자의 디바이스 화면 크기를 고려하여 디자인을 나눠 보여주는데 그 나누는 기준점을 분기점이라고 말한다.

분기점 기준

일반적으로 데스크탑, 태블릿, 모바일의 3가지 기준점을 세운다.
(최근에는 데스크탑 (태블릿), 모바일 2가지)

분기점은 가로 길이 기준으로 한다.

💡참고

1024px ≤ 데스크탑 화면
768px ≤ 태블릿 화면 < 1024px
모바일 화면 < 768px

모바일 화면의 최소 가로 사이즈를 정해주는 것이 좋다.
아무리 작아져도 더 이상 작아지지 않는 지점이 있어야 레이아웃이 망가지는 것을 막을 수 있다.
(ex. 300px 이하로 작아지지 않게 해주세요)

태블릿 사이즈

1. 태블릿은 생략하거나 모바일 화면 분기점으로 통합하는 경우가 많다. (태블릿 사용자가 적기 때문)
2. 온라인 강의나 교육 플랫폼은 태블릿 해상도를 신경써야한다.

임의로 정할 경우

임의로 분기점을 정해도 되지만 사용자의 디바이스와 화면이 일치하도록 디바이스 화면의 해상도를 고려하여 나눠야한다.

🔗 기기의 해상도 통계 참고 :
https://gs.statcounter.com/screen-resolution-stats

그리드 (Grid)

가로 선과 세로 선을 직각으로 교차되게 만든 것
화면에 디자인을 배치하는 가이드라인

주로 세로 방향의 기둥을 세우지만 가로 줄을 추가하는 경우도 있다

디자인을 배치할 기준선이 되는 가상의 선을 긋고, 그 선에 맞춰 레이아웃을 만든다.

사용하는 이유

반응형 웹이 분기점마다 디자인을 바꿀 때 균형감과 완성도, 일관성을 더하기 위해 그리드에 맞춰 요소들을 배치한다.

💡

칼럼 (Column)

세로 방향의 기둥

12칼럼 그리드 (12 column grid)

12개는 1,2,3,4,6,8,10,12 로 나눠 유연하게 배치가 가능하여 자주 사용하게 되었다.
ex. 모바일 → 4, 태블릿 → 4x2 = 8개, 데스크탑 → 4x3 = 12개

그리드의 구조

1 칼럼 = 1/2 Gutter + 1 Unit + 1/2 Gutter
맨 양끝의 칼럼에 남은 각각의 거터 절반은 좌우 여백으로 사용

3. 반응형과 적응형

반응형 (Responsive)

해상도의 변화에 실시간으로 반응 (변화가 점진적)

웹 브라우저를 잡고 크기를 줄였다가 키우면 실시간으로 같이 줄어들거나 커지는 디자인

적응형 (Adaptive)

한 번 적용하면 움직이지 않은 고정된 디자인

해상도가 변하더라도 반응을 하거나 실시간으로 변하지 않는 디자인 (새로고침 해야 변경)

차이 및 특징

둘의 가장 큰 특징은 ‘변화가 실시간으로 이뤄지는가?’ 로 구분이 된다.

- 반응형 디자인

하나의 디자인을 화면 크기의 움직임을 감지해서 실시간으로 반응

하나의 CSS 파일에 미디어 쿼리로 각각의 해상도를 나눠 CSS를 전부 다운로드 하여 사용

모든 컨텐츠를 다운로드 해야하므로 로딩 속도가 느리다.

- 적응형 디자인

각 사이즈마다 정해진 디자인이 있어 그것만 보여준다.

화면 해상도에 맞춰 각각의 템플릿 혹은 CSS 파일이 존재하여 브라우저에서 기기에 맞는 파일을 제공

기기에 맞는 파일만 다운로드하여 데이터 낭비가 적고 로딩 속도가 빠르지만 템플릿의 컨텐츠가 모든 기기에서 일관되지 않을 경우 SEO에 부정적인 영향을 미치는 단점이 있다.

🔗참고 :
https://ko.wix.com/blog/post/responsive-vs-adaptive-design
https://velog.io/@dev_jihee/%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-vs-%EC%A0%81%EC%9D%91%ED%98%95-%EC%9B%B9

필요에 따라 두가지를 섞어 사용한다.

4. 정보구조도와 플로우 차트

정보구조도

층별 안내도

전체적인 구성과 각 화면들간의 관계 파악에 용이

Information Architecture 의 앞글자만 따서 IA라고 부르기도 함

화면과 정보들이 어떤 구조로 연결되어 있는지를 보여주는 일종의 설계도 역할

💡 하루 5분 UX에 나온 팁 331p

사용자가 검색창에 무언가를 검색한다는 것은 그것을 찾을 수 없다는 뜻이다.
그러므로 그런 로그 기록은 인포메이션 아키텍쳐와 레이아웃을 개선하는 데 메우 중요하게 사용될 수 있다.

플로우차트 (화면 흐름도)

목적지까지 도달하는 길

사용자가 원하는 작업을 수행하기 위해 제품의 어떤 과정을 거치는지 시각적으로 정리한 순서도

유저 플로우나 유즈케이스라고도 불린다.

정보구조도를 작성하고 플로우차트를 먼저 만들어본다면 와이어프레임과 프로토타입 제작에 필요한 사용자 시나리오를 좀 더 정교하고 촘촘하게 만들 수 있다.

기획을 디자인으로 옮기는 방법

어떤 기능을 만들지, 어떤 방향으로 만들지가 정해졌다면 디자인과 개발 단계로 들어가기 전에 먼저 전체적인 개요와 흐름을 정하며 팀원들 간 이해도를 동일하게 맞추는 과정을 거친다.

회사나 팀의 사정에 따라 진행하는 과정이나 형식이 다르니 정보구조도와 화면흐름도가 필수는 아니다!

5. 와이어프레임

화면과 시나리오를 최대한 단순한 형태로 만들어 빠르게 공유할 수 있도록 한 것

선(와이어)로만 그려진 화면
Lo-fi 프로토타입이라고도 불린다. 스케치의 개념

빠르고 효율적인 커뮤니케이션과 일관된 디자인 방향이 목적

연필 스케치, 파워포인트, 피그마 등 어떤 방법으로 만들어도 상관이 없다

사용하는 이유

1. 팀 구성원간의 생각을 통일하여 협업을 원할하게 진행할 수 있도록 한다.

글로만 이루어진 문서를 보고 디자인과 개발 단계에 들어가면 서로 생각이 달라 의사결정에 차이가 생긴다.

단순한 디자인이지만 화면의 형태를 보며 서로 다르게 이해한 부분들을 줄여간다.

디자인 직군이 아닌 팀원도 와이어프레임을 보고 어떤 구조로 개발을 할 것인지, 얼마의 비용이 드는지 등 여러 사항에 대해 파악이 가능하므로 필요한 시간과 자원을 미리 정하고 아낄 수 있다.

2. 디자인을 관리하기 쉽고 불필요한 부분에 시선을 뺏기지 않는다.

처음부터 완성된 UI로 작업을 하게 되면 디테일한 부분에 시선을 뺏겨 사용자 시나리오에 집중하는 것이 어렵고 너무 완성되어있으므로 수정이나 변경이 쉽지 않다.

최대한 단순한 형태부터 시작하여 중요한 흐름을 정의하고 디자인 방향을 조금씩 잡아가며 완성도를 높인다.

3. 습관 형성 모델을 반복적으로 실험해 볼 수 있다.

사용자가 습관적으로 우리가 만드는 제품을 사용하도록 만들기 위해 사용자 시나리오를 작성하고 그 내용을 바탕으로 와이어프레임을 만들어 습관 형성 과정이 효과적인지, 아쉬운 부분이 무엇인지 빠르게 검증하고 수정할 수 있다.

주의사항

• 와이어 프레임에서 표현할 것과 표현하지 않을 것을 정한다.
  (사용자가 반드시 알아야할 것, 다음 단계로 넘어가기 위해 필요한 요소 )
  

• 시나리오에 필요하지 않는 요소라면 생략하거나 글자로 표현

• 최대한 단순하고 빠르게 그리기 위해 단색의 선 사용

💡 선으로 연결하는 이유

각 화면들이 어떻게, 어떤 관계로 이루어져 있는지 파악하고 화면 간 이동을 할 때 어떤 동작을 하게 되는지 알기 쉽도록 선으로 연결한다.
화면과 화면끼리, 특정 요소와 화면끼리 연결할 수 있다.

6. 그리드 그리기 실습

방법

1. 피그마에서 데스크탑, 태블릿, 모바일 사이즈에 맞춰 각각의 프레임 생성

2. 오른쪽 패널의 레이아웃 그리드에서 그리드 적용
   (각각 데스크탑, 태블릿, 모바일)
   type에는 left, right, center, stretch가 있다.
   각각 왼쪽, 오른쪽, 중앙에 그리드가 생성되고 stretch는 전체 화면을 덮도록 늘린 것이다.

3. 각 프레임에 맞게 설정된 것을 확인할 수 있다.
   

4. 플러그인 설치
   

5. 디스플레이 크기의 프레임 생성

6. 인풋 프레임을 클릭하고 데스크탑, 태블릿, 모바일 세개의 프레임을 클릭한다.
   그 후 반응형 프레임을 클릭하고 디스플레이 프레임을 클릭한다.
   

완성

디스플레이 화면을 잡고 크기를 변경하면 사이즈에 맞는 그리드가 적용되는 것을 확인할 수 있다.

🎙️ 소감

피그마 숙련 강의를 학습했는데 강의가 짧아 여유를 지나치게 부리며 있었는데 과제가 있다는 것을 늦게 확인하였다.
급하게 과제를 하다가 모바일 웹을 조사했어야 했는데 데스크탑 웹을 조사해서 시간을 많이 날렸다.
부지런히 강의도 듣고 과제도 수행해야겠다.