[TIL / 241030] D+8 / 디자인카타, Figma 활용법 (2) 1-2주차 수강

1. 디자인카타

늦잠이슈로 10분 지각..ㅠㅠ

원래 끝나는 시간보다 1시간 더 했었던 것 같다.

모든 학우분들의 레퍼런스를 보고 의견을 들었었는데

확실히 랜딩페이지에 대한 개념이 잡혔다.
내일은 다른 주제로 진행한다고 하시는데 3일간의 프로세스에 맞춰서 진행하게 될 것 같다.

아무래도 튜터님과 다대일로는 처음 진행하는  프로그램이다 보니 맞춰가는 단계라고 생각한다.

붙어있는 코멘트들...첫순서라 다행이었나 싶고

 

 

2. Figma 활용법 (2) 1~2주차 수강

헷갈렸던 개념들을 적어놨다..
실습하면서 알긴알아도 적어놔야 까먹지 않고 복기할 수 있을 듯하여..

1) 컴포넌트

 (1) 컴포넌트의 개념

• 컴포넌트는 파운데이션을 조합해서 만듦.
• 물론 컴포넌트를 조합해서 다른 컴포넌트를 만드는 것도 가능
• 컴포넌트를 공부할 땐 형태보다는 기능과 목적에 더 초점을 두고 공부해야함.

 (2) 컴포넌트의 종류

• 컴포넌트는 기능과 목적을 기준으로 크게 6가지 종류로 구분할 수 있음.
  (일반적인 버튼-Action, 텍스트필드-Input, 다이얼로그-Container, 체크박스와 라디오버튼-Control)
• 디자인 시스템마다 종류와 이름은 모두 다를 수 있음.

2) 버튼 컴포넌트

 (1) 버튼 컴포넌트는 사용자의 행동을 실행하는 컴포넌트

 (2) 버튼답게, 누가봐도 누를 수 있다는 힌트를 줘야함→행동유도성(Affordance)

3) 텍스트필드 컴포넌트

 (1) 텍스트필드 컴포넌트는 사용자가 문자를 입력할 수 있는 컴포넌트

 (2) 텍스트필드를 만들 때는 입력된 텍스트가 맞는지 확인하는 유효성 검증(Vaildation Check)을 신경써야함.

4) 다이얼로그 컴포넌트

 (1) 제품의 흐름에서 중요한 선택을 하게 해주는 컴포넌트

 (2) 다이얼로그는 모달 컴포넌트. 모달 속성이라고 할 수도 있음.

 (3) 다이얼로그를 쓸 때는 라이트박스와 함께 사용하는 것이 일반적임.

5) 체크박스와 라디오 컴포넌트

 (1) 체크박스와 라디오는 사용자가 다수의 선택지 중에 원하는 것을 선택하게 도와줌.
 (2) 체크박스는 여러 개 선택이 가능하고, 라디오는 하나만 선택할 수 있음.

 (3) 체크박스와 라디오는 형태와 기능이 유사하기 때문에 차이를 명확하게 알아야 함.

 

 

피그마 활용법 (2) 1주차

---

모달

1. 합성 컴포넌트와 컨테이너 컴포넌트

버튼은 이미 컴포넌트인데, 버튼 안에 폰트,컬러스타일, 여백 및 간격, 곡률등이 합쳐져 다시 컴포넌트가 되어있음.

• 위와 같은 컴포넌트를 합성 컴포넌트(Compound Component)라고 부름.
• 합성컴포넌트는 대부분 버튼 컴포넌트에 파운데이션 또는 컴포넌트가 여러개 합쳐진 형태.
• 컨테이너 컴포넌트라고도 부름
• 컨테이너 컴포넌트에는 바텀시트, 다이얼로그, 리스트, 카드 등 복잡한 구조의 컴포넌트들이 있음.

2. 모달(Modal)

1) 팝업의 개념 : 화면 위에 새로운 화면을 띄우는 걸 일반적으로 팝업이라고 부름.

2) 팝업의 유형

• 윈도우 팝업 : 새로운 윈도우(브라우저 창)을 띄워주는 방식, 일반적으로 팝업이라고 부르는 방식
  요즘은 점점 사용하지 않는 추세임(보안이슈, 새로운 창이 떠서 방해되기 때문)
• 레이어 팝업 : 현재 화면에서 코드로 만든 컴포넌트를 보여주는 방식
  대부분의 서비스는 이러한 방식으로 팝업을 보여주고 있음.

3) 그래서 모달이 뭔데?

• 원래화면을 어둡게 가리면서 '지금 여기는 작동하지 않아'라는 걸 알려주고 로그인화면에 시선을 집중시킴.

4) 모달의 개념과 종류

까맣게 가려진 뒤쪽 화면은 조작할 수 없다라고 알려주고있음.

• 모달은 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것을 뜻함.
• 모달(Modal)이라는 건 UI의 이름이 아니라, UI를 분류하는 기준 중 하나라는 뜻이에요.
• 모달은 앱이나 웹을 사용하면서 굉장히 많이 발견할 수 있는 UI들
• 팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등 많은 UI들이 모달로 사용되고 있음.

5) 라이트박스의 UX

 (1) 라이트박스의 개념

• 모달 UI를 사용할 때는 일반적으로 '뒤에 가려진 화면은 사용할 수 없다'는 걸 보여주기 위해 반투명한 층을 만들어줌
• 이 반투명한 층을 라이트박스(Lightbox)라고 부르며
  크림(Scrim), 딤드(Dimmed), 딤레이어(Dim Layer), 오버레이(Overlay) 등으로도 불림.

 (2) 라이트박스의 사용법

• 라이트박스는 반드시 써야하는 것은 아님. 모달과 배경을 분리해주고 집중해야 하는 부분을 안내하기 위한 목적이지, 모달에 반드시 같이 써야하는 것은 아님. / 권장사항
• 라이트박스를 누르면 사용자가 취소 또는 뒤로가려는 것으로 간주, 열기 전으로 다시 되돌려주는 것이 일반적인 방법

네이버지도 앱에서 사이드바를 열고 라이트박스를 누르면 사이드바가 닫혀요.

• 다만 매우 중요한 선택을 해야하는 상황이거나 뒤로 돌아가면 지금까지의 진행상황이 모두 삭제되는 경우라면 라이트박스를 눌러도 꺼지지 않게 해야함.

중요한 내용을 작성하다가 잘못조작하는 바람에 삭제된다면 사용자는 난색을 표할 것.

 

(3)모달 사용시 주의사항

• 사용자가 원래 쓰고 있던 화면을 잠가버리고, 사용자가 뭔가 행동을 취하기 전까지는 풀어주지 않음
• 모달이 많을수록 사용자가 불편해할 가능성이 매우 높아져요.
• 사용자를 방해하면서라도 꼭 확인해야하는 부분이거나 중요한 선택이 필요한 시점에 사용해야 하는 것이 모달임.

---

다이얼로그 컴포넌트

1. 다이얼로그 컴포넌트의 정의

• 컴포넌트의 종류 중 컨테이너에 해당하는 컴포넌트
• 컨테이너 컴포넌트이면서, 동시에 모달속성을 가진 컴포넌트.
• 다이얼로그(Dialog;대화)는 사용자에게 중요한 선택을 받고, 사용자가 선택한 행동을 확인하는 컴포넌트
• 다이얼로그를 쓴다는 건 사용자의 의사를 묻고 답을 얻을 때 사용

현업에서 모달이라는 말은 실제로 다이얼로그 컴포넌트를 가리킬 때가 많아요.

2. 다이얼로그의 구조

1) 컨테이너 : 다이얼로그 안에 있는 요소들을 감싸고 있는 프레임

2) 헤더 : 다이얼로그의 제목, 부가설명 등이 들어간 제목 / 헤더부분에는 썸네일 이미지나 아이콘, 닫기 버튼 등이 들어갈 수도 있음.

3) 액션 : 다이얼로그의 버튼 부분을 뜻함./액션 부분에는 버튼이 여러개 들어갈 수도 있음.

네이버 메일에서 휴지통을 비울 때 나타나는 다이얼로그

3. 다이얼로그 설계에서 유의할 점

 1) 선택지의 유형에 따라서 조작법이 달라짐.

• 사용자가 A 또는 B를 선택해야 하는 상황과, 사용자에게 경고 또는 확인 등을 표시할 때가 다름.
• 전자의 경우는 다이얼로그, 후자의 경우는 얼럿(Alert)이라고 부름
• 다이얼로그는 라이트박스를 누르면 닫히지만, 얼럿의 경우는 눌러도 닫히지않음.
  (얼럿의 경우 직접 확인이나 취소버튼을 눌러야함)

왼쪽이 다이얼로그, 오른쪽이 얼럿

 2) 사용자 흐름에서 필수로 거쳐야 할 때 사용해요. 

• 다이얼로그는 필연적으로 사용자를 방해해요.
• 중요한 시점에 쓰거나 반드시 받아야 하는 정보만 받아야 함.
• 사용자가 반드시 확인해야하는 정보가 아니라면 다이얼로그나 얼럿을 피해줄 것.

피드백을 잘 전달했다는 메세지는 다이얼로그보다는 토스트 메세지로 전달해주는 것이 좋음.

4. 다이얼로그 실습

컨트롤 요소 이해하기

1. 컨트롤 컴포넌트의 뜻

    사용자가 선택지를 특정할 수 있도록 하는 요소, 여러 선택지 중 사용자가 원하는 것을 고를 수 있도록 돕는 요소

2. 컨트롤 컴포넌트의 종류

     디자인 시스템마다 차이는 있지만, 대부분 아래의 4개 컨트롤은 포함되어있음.

왼쪽부터 체크박스, 라디오, 스위치(토글), 슬라이더

3. 컨트롤 요소 설계시 참고할 점

 1) 컨트롤 요소의 최소 터치 영역

왼쪽처럼 원래크기는 작더라도 실제로 누를 수 있는 공간은 오른쪽처럼 좀 더 넓게 잡아주는 것이 좋음.

 2) 컨트롤 요소의 라벨

• 컨트롤 요소는 대부분 라벨과 같이 쓰임
• 라벨을 누르더라도 컨트롤 요소가 작동하게 하는 것이 일반적임.

• 여러 컨트롤 요소를 배치할 때는 간격을 충분히 줘서 잘못 누르는 일이 발생하지 않도록 함.

 3) 컨트롤 요소와 라벨의 정렬

• 컨트롤 요소와 라벨을 좀 더 깔끔하게 정렬하려면 두 요소의 세로를 같게 해두는 것이 좋음.
• 라벨의 세로는 행간과 같기 때문에 컨트롤의 사이즈를 행간에 사용한 값들로 만들어 두면 정렬을 조금 더 쉽게 할 수있음.

체크박스 컴포넌트

1. 체크박스 컴포넌트의 정의

 1) 체크박스는 여러 선택지 중 1개 이상을 선택할 때 사용하는 컨트롤 컴포넌트

 2) 일반적으로 라벨과 함께 쓰임.

2. 체크박스의 의사상태

 1) 기본적으로 두가지의 의사상태를 가지고 있으나 자세히 설계한다면 더 많은 상태를 가질 수도 있음

3. 체크박스의 특징

 1) 체크박스는 여러개를 선택할 수 있음. (하나를 선택한다고 해서 다른 선택지에 영향을 주지 않음)

 2) 체크박스는 아무것도 선택하지 않을 수 있음.

 3) 하위 항목이 있을 때 일부만 선택 가능

• 상위 항목을 선택하면 하위가 모두 선택되고, 하위 항목을 일부 체크하거나 해제하면
  상위 항목의 상태가 '결정되지 않은' 이라는 뜻의 Indetermined 상태로 변함.

실무에서는 개발 요소의 부담을 줄이기 위해 상위항목의 체크박스를 해제하는 걸로 통일해서 사용하기도 함.

 4. 체크박스 만들기

 라디오 컴포넌트

1. 라디오 컴포넌트의 정의

1) 라디오는 여러 선택지 중 1개를 선택할 때 사용하는 컨트롤 컴포넌트, 일반적으로 라벨과 함께 쓰임

2. 라디오의 의사상태

체크박스와 마찬가지로 자세하게 설계한다면 더 많은 상태를 가질 수도 있음.

3. 라디오의 특징

1) 라디오는 여러 개 동시에 선택할 수 없음.

2) 라디오는 아무것도 선택하지 않는 게 불가능함. (사용자가 많이 선택하는 항목을 기본값으로 설정해두면 편하게 진행가능)

4. 라디오 만들기

 

---

피그마 활용법 (2) 2주차

---

다양한 환경에서의 UI 차이

1. 웹과 앱의 특성

	웹	앱
운영체제 제한	없음	안드로이드와 iOS앱 별도로 준비
접근성	웹브라우저에 주소만 입력하면 가능	앱마켓에서 설치해야함
업데이트 난이도	업데이트하기 쉬움	앱마켓 심사를 통과해야 가능
인터랙션 UI	웹브라우저와 충돌하지 않는 선에서 가능	다양하게 사용할 수 있음
성능	다양한 기기에서 제약 없이 쓸 수 있지만 그만큼 카메라, GPS, 사진 보관함 등 성능면에서 떨어짐.	기기에 특화된 기능을 사용할 수 있지만 다양한 디바이스를 지원하게 만드는 것이 어려움.
개인화	푸시나 알림을 제공하기 어려움	푸시 메시지를 보낼 수 있음.

2. 대표적인 웹과 앱의 차이

 1) 페이지 이동

• 앱은 임의로 주소를 입력해서 이동할 수 없음.
• 반면 웹은 주소창에 URL을 입력하면 어디든 접근할 수 있음.
  (주소창에 URL을 입력해서 어디든 접근할 수 있다는 건 로그인하지 않으면 볼 수 없는 화면에 접근할 수 있다는 문제가 생김,
  사용자가 잘못된 화면에 접근했을 때 다시 정상적인 화면으로 돌려보내줄 수 있어야 함.)

오늘의집 모바일 웹에서 메인화면에서 URL을 입력해서 주문서 화면으로 이동하면 잘못된 화면이라고 안내해주고, 장바구니 페이지로 안내해줘요.

 2) 뒤로가기

• 앱의 경우, 일반적으로 화면 상단의 아이콘 등 버튼을 눌러서 화면을 이동해요.
• 하지만 웹의 경우 브라우저 자체 기능을 통해 이전화면으로 돌아가는 것이 자유로워요.

 3) 주요 메뉴 이동

• 모바일 웹에선 일반적으로 화면 상단에 주요 메뉴로 이동할 수 있는 UI를 배치해요.
• 앱에선 화면 하단에 고정된 탭을 배치해 주요 메뉴로 이동할 수 있도록 해요.
• 두 UI는 동일한 목적과 기능을 가지고 있지만, 웹과 앱에서 다르게 나타나는 대표적인 UI에요.
• 최근 모바일 웹들도 앱처럼 화면 하단에 고정된 메뉴를 놓는 걸로 바뀌고 있어요.

무신사의 모바일웹과 앱의 UI가 매우 흡사함.

 4) 바텀시트

• 바텀 시트의 경우 하단에 고정되어있음.
• 앱에서는 바텀시트를 다양한 용도로 활용하지만, 모바일 웹에서는 사용하기 까다로움.
• 앱에서는 바텀시트를 드래그 해서 닫을 수 있지만, 모바일 웹에서는 드래그해서 닫기 어려움.

 

3. OS별 차이

 1) iOS 홈 인디케이터(아이폰에서 홈 화면으로 이동할 수 있는 UI)

왼쪽이 안드로이드, 오른쪽은 아이폰 / 화면하단의 홈 인디케이터가 콘텐츠를 가리는 경우

• 홈 인디케이터가 있는 경우, 하단에 고정된 UI를 신경써야함.

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

• 안드로이드의 경우 뒤로가기 버튼이 기본 UI로 제공 됨.
• 안드로이드에서 앱을 사용하다가 뒤로가기를 누르는 경우, 2가지의 경우가 존재함
  (1) 이전화면으로 가기(History Back) : 현재 화면 전에 방문한 화면으로 다시 돌아가는 것
  (2) 상위 화면으로 가기(Hierarchy Back) : 현재화면보다 더 상위에 있는 화면으로 올라가는 것

4. 정리

 1) UI는 웹과 앱의 차이에서 많이 나타남.

 2) 차이에 따른 UI디자인은 절대적인 기준이 아니기 때문에, 사용성을 고려해서 선택해야 함.

 

정보구조도와 플로우차트

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

• 우리가 만들어야 할 기능이나 제품의 방향을 정했다면, 본격적으로 디자인과 개발을 하기 위한 작업들을 진행하게 됨.
• 전체적인 개요와 흐름을 정하면서, 개발자-디자이너-기획자 간 이해도를 동일하게 맞춰요.
• 일반적으로 정보구조도와 화면 흐름도를 만들어요.

2. 정보구조도와 플로우차트의 차이

• 정보구조도와 플로우차트는 유사해보이지만 개념과 목적에 큰 차이가 있어요.
• 제품을 하나의 건물에 비유한다면, 정보구조도(IA)는 층별 안내도, 플로우차트는 오시는 길이라고 할 수 있어요.

3. 정보구조도

• 정보구조도의 영문 앞글자를 따서 IA라고 부르기도 함.
• 화면과 정보들이 어떤 구조로 연결 되어있는지를 나타내는 일종의 설계도라고 할 수 있어요.
• 제품을 건물이라고 생각했을 때 IA는 층별 안내도라고 할 수 있어요.

4. 화면흐름도(Flowchart)

• 화면흐름도는 플로우차트라는 이름으로 많이 씀.(유저플로우나 유즈케이스라고 부르는 경우도 종종 있음)
• 사용자가 어떤 과정으로 제품을 이용하는지를 시각적으로 정리한 순서도라고 할 수 있음.

• 제품을 건물이라고 생각했을 때 플로우차트는 오시는 길이라고 할 수 있어요.

어디서 무엇을 타고 어디로 오면 된다는 오시는 길 안내처럼, 플로우차트는 사용자가 어떤 과정을 통해 목적에 도달할 수 있는지를 보여줘요.

와이어프레임

1. 와이어프레임의 개념

• 와이어프레임은 말 그대로 선(와이어)으로 그려진 화면이라는 뜻
• 어떻게 만들지 논의하는 과정을 거치고 나면, 본격적인 디자인을 하기전에 주로 하게 됨.
• 낮은 단계의 프로토타입이라는 뜻에서 Lo-fi Prototype 이라고 부를 때도 있어요.

2. 와이어프레임을 만드는 이유

• 팀원 간의 다른 생각을 통일할 수 있고 협업을 원활하게 해요.
  : 글로 된 문서만 보고 디자인과 개발을 하게 되면, 서로 생각이 조금씩 달라서 문제가 생길 수 있어요.
  아무리 단순한 디자인이더라도 화면의 형태를 같이 보면서 이해가 다른 부분을 줄일 수 있어요.
• 디자인을 관리하기가 쉽고, 불필요한 부분에 시선을 뺏기지 않아요.
  : 처음부터 너무 완성된 UI로 작업하게 되면 중요한 사용자 시나리오에 집중하기가 어렵고, 디자인 변경이나 수정할 때 빠르게 대응하기가 힘들어요. 최대한 단순한 형태로 중요한 흐름만 만든다면 집중하기도 좋고 디자인 방향을 조금씩 잡아가면서 완성도를 끌어올릴 수 있어요.
• 습관 형성 모델을 반복적으로 실험해볼 수 있어요.
  : 와이어프레임을 만드는 이유 중 가장 중요한 것은 참여 전략과 북극성 지표를 토대로 설계한 습관 형성 모델이 잘 작동할 수 있는지를 확인하는 것이 필요하기 때문이에요. 습관이 형성될 수 있도록 사용자 시나리오를 작성하고, 와이어프레임을 통해 그 과정이 매끄러운지 부족한 건 없는지를 빠르게 검증해 볼 수 있어요.

3. 와이어프레임을 그리는 법 (손이나 컴퓨터로 그려도 되고 파워포인트나 피그마 사용해도 됨)

 1) 와이어프레임 규칙 정하기

• 와이어프레임에서 표현할 것과 표현하지 않을 것을 과감하게 고른다.
• 최대한 단순하고 빠르게 그릴 수 있도록 단색의 선을 사용하는 것을 권장.

 2) 그리고자 하는 화면 스케치하기

유튜브 홈 화면과 영상 상세화면의 와이어프레임.

• 최대한 단순하게 그리는 것이 핵심
• 시나리오에 필요하지 않은 부분은 과감하게 글자나 단순한 도형으로 대체
• 텍스트의 경우 최대 길이를 가늠할 수 있도록 실제 사용할 내용을 넣어주면 좋음.

 3) 화면을 선으로 연결하기

와이어프레임을 만든 화면들을 선으로 연결하는 이유는 화면들이 어떤 관계로 이어져있는지 파악하기 위함.