챕터1_피그마 활용 심화_1

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

* 웹과 앱의 특성

* 대표적인 웹과 앱의 UI차이

📌 UI는 기능과 목적이 중요하다. 이런 UI에 차이가 있다는 건 목적에 차이가 있다는 뜻이고, 목적에 차이가 있다면 UX에서도 차이가 생긴다.

• 페이지 이동
  • 앱은 임의로 주소를 입력해서 이동할 수 없다.
  • 반면 웹은 주소창에서 URL을 입력하면 어디든 접근할 수 있다.
• 뒤로가기
  • 앱의 경우, 일반적으로 화면 상담의 아이콘 등 버튼을 눌러 화면을 이동한다.
  • 반면, 웹의 경우 브라우저 자체 기능을 통해 이전 화면으로 돌아가는 것이 자유롭다.
• 주요 메뉴 이동
  • 모바일 웹에선 일반적으로 화면 상단에 주요 메뉴로 이동할 수 있는 UI를 배치한다.
  • 앱에선 화면 하단에 고정된 탭을 배치해 주요 메뉴로 이동할 수 있도록 한다.
  • 두 UI는 동일한 목적과 기능을 가지고 있지만, 웹과 앱에서 다르게 나타나는 대표적인 UI
  • 최근 모바일 웹들도 앱처럼 화면 하단에 고정된 메뉴를 놓을 걸로 바뀌고 있다.
• 바텀시트 (Bottom Sheet)
  📌 화면 하단에 고정되어 현재 화면과 관련된 옵션이나 메뉴를 제공하는 UI.
  • 바텀 시트의 경우 화면의 하단에 고정되어 있다.
  • 앱에서는 바텀 시트를 다양한 용도로 활용하지만, 모바일 웹에서는 사용하기 까다롭다.
  • 앱에서는 바텀 시트를 드래그해서 닫을 수 있지만, 모바일 웹에서는 드래그해서 닫기 어렵다.
    • 웹 브라우저에서 아래로 화면을 드래그 하면 새로고침이 될 가능성이 있다.

* OS별 차이

• OS에 따라 UI를 다르게 사용하는 경우가 있어요.
  • 아이폰의 경우, 애플 로그인이 다른 로그인 수단에 비해 덜 중요하게 보이지 않도록 해야 한다.
  • 또한 소셜 로그인이 있는 경우, 애플 로그인도 로그인 수단에 반드시 포함시켜야 한다.
• iOS 홈 인디케이터
  • 홈 인디게이터가 있는 경우, 하단에 고정된 UI들을 신경 써야 한다.
• 안드로이드 네비게이션 바의 뒤로가기
  • 안드로이드의 경우 뒤로가기 버튼이 기본 UI로 제공된다.
  • 안드로이드에서 앱을 사용하다가 뒤로 가기를 누르는 경우, 2가지의 경우가 존재한다.
    • 이전 화면으로 가기 (History Back) : 현재 화면 전에 방문한 화면으로 다시 돌아가는 것을 뜻한다.
    • 상위 화면으로 가기 (Hierarchy Back) : 현재 화면보다 더 상위에 있는 화면으로 올라가는 것을 뜻한다.

* 정리

📌 UI에 차이를 두기 위해선 UI를 사용하는 목적과 상황을 모두 고려해서 다르게 해야 한다.

• UI는 웹과 앱의 차이에서 많이 나타남.
• 아이폰과 안드로이드처럼 OS가 다른 경우에도 조금씩 다를 수 있다.
• 같은 아이폰이라도, 홈 인디케이터때문에 차이가 생길 수 있다.
• 차이에 따른 UI디자인은 절대적인 기준이 아니기 때문에, 사용성을 고려해서 선택해야 한다.

2. 분기점과 그리드

* 분기점(Breakpoint)

• 분기점의 개념
  • 디스플레이의 해상도에 따라 각각 다른 화면을 보여주기 위한 기준점을 분기점이라고 한다.
• 분기점이 중요한 이유
  • 웹사이트를 방문할 때 주로 스마트폰의 웹브라우저를 사용하지만, 태블릿도 있고, 테스크톱이나 노트북으로도 웹사이트를 방문한다.
  • 이때, 웹사이트는 우리가 쓰는 디바이스 화면 크기에 따라 다른 다즌 디자인을 보여준다.
  • 즉, 우리는 사용자의 디바이스 화면 크기를 고려해서 디자인을 나눌 수 있어야 한다.
  • 그 나누는 기준점이 바로 분기점이다.
• 일반적인 분기점 정하기
  • 일반적으로 데스크탑, 태블릿, 모바일 3가지 기준점을 세운다.
  • 분기점은 가로 길이를 기준으로 합니다.
    • 가로가 1024px 이상이라면 데스크탑 화면
    • 가로가 768px 이상, 1024px 미만이라면 태블릿 화면
    • 가로가 768px 미만이라면 모바일 화면
      • 모바일 최소 가로사이즈를 정해주는 것이 좋다. 아무리 모바일 화면이 작다고 해도 더 이상 작아지지 않는 지저밍 있어야 레이아웃이 깨지는 걸 막을 수 있다.
• 분기점을 정할 때 생각하면 좋은 것
  • 태블릿 해상도 대응
    • 태블릿은 생략하거나, 태블릿 해상도 전체를 모바일 분기점으로 통합하는 경우도 많다.
    • 태블릿 사용자가 데스크톱과 모바일에 비하면 매우 적기 때문이다.
    • 또한 디자인과 개발해야 하는 화면 세트가 1개씩 더 늘어나기 때문이다.
    • 하지만 온라인 강의나 교육은 태블릿으로 많이 하기 때문에, 이런 경우에는 태블릿 해상도도 신경 써야 한다.
  • 일반적인 해상도 말고 다른 해상도를 정하고 싶다면?
    • 통계자료 웹사이트

* 그리드(Grid)

• 그리드의 개념
  • 그리드는 화면에 디자인을 배치하는 가이드라인이다.
  • 일반적으로는 세로 방향의 기둥들은 좌우로 세우는데, 가로 줄을 추가로 사용하는 경우도 있다.
  • 디자인을 배치할 기준선이 되는 가상의 선을 긋고, 그 선에 맞춰서 레이아웃을 짜게 된다.
• 그리드를 사용하는 이유
  📌 반응형 웹이 분기점마다 디자인을 바꿀 때, 그리드를 따라 정렬된다.
  • 원래 그리드는 편집 디자인에서 쓰는 용어인데, 종이에 글과 그림을 배치하는 기준점이다.
  • 그리드를 사용하는 이유는 글과 그림들을 균형감 있게 배치하기 위해서이다.
  • 또한 주목해서 읽어야 하는 부분을 강조하고, 적당한 간격을 만들어 더 잘 읽히게 하기도 하는 등 전체적인 완성도를 올리기 위해서이다.
  • 우리가 사용하는 그리드의 개념은 종이 문서가 디지털 문서, 즉 웹페이지로 바뀌었을 뿐이다.
  • 웹에서 그리드를 사용하는 이유 역시 균형감과 완성도, 일관성을 위해서이다.
• 그리드를 만드는 방법
  • 일반적으로 데스크톱 화면을 기준으로 기둥은 12개를 사용한다. 12개를 사용하는 레이아웃을 12칼럼 그리드(12 Column Grid)라고 한다.
  • 그리드는 원칙이 아닌 가이드라인이기 때문에 꼭 있어야 하는 건 아니지만, 내 디자인이 어딘가 모르게 어색하고 정렬이 되지 않는 느낌이라면 그리드를 최대한 활용하자.
• 그리드의 구조
  • 칼럼은 유닛(Unit)과 거터(Gutter)로 이루어져 있어요.
  • 유닛은 실제 콘텐츠를 정렬하는 기준선이고, 거터는 유닛과 유닛 사이의 여백이에요.
  • 한 개의 칼럼은 유닛 1개와 양쪽에 거터 절반씩을 합친 크기예요.
  • 맨 양끝의 칼럼 끝에는 거터 절반이 남는데, 이건 좌우 여백으로 사용해요.
• 자주 사용하는 그리드 예시
  • 960 (유닛 너비:60 / 거터 너비: 20)
  • 1200 (유닛 너비:76 / 거터 너비: 24)
  • 1440 (유닛 너비:96 / 거터 너비: 24)