2024/11/4/ 11일차

디자인 카타에서 배운 내용

랜딩 VS 홈페이지의 차이

• 랜딩페이지 특정 목적을 갖고 제작하는 경우가 많고 사용자의 특정 액션을 유도하는 마케팅 웹 페이지여서 홈페이지보다 더
  세분화 되고 타겟층이 명확하며 한가지의 주제에 대한 설명과 소비자를 유혹시키는 페이지를 구성하는 것입니다. 또한 레이아웃이 간결하고 이탈을 최소화 하여야 하고 고객들에게 신뢰를 할 수 있는 이미지를 어필하고 
• 홈페이지는 소비자들에게 기업과 브랜드의 제품에 대한 모든 소개와 정보를 알려줌
  
  

페이지네이션과 VS 스크롤페이지의 차이

• 스크롤은: 사용자가 탐색적인 목적이 많을땐 인피니트 스크롤의 장점은 심플하고 지속적으로 이 콘텐츠를 계속 소비히가를 원할 떄

• 페이지네이션은 타겟층의 검색과 목적이 확실할 땐 명확한 가이드와 스텝이 더 많다. 
  
  

 

 

4주차 과제가 드디어 끝났음..... 

멀고도 험하고 길어보였지만 앞으로 헤쳐나갈일은 더 멀고 깊다! 
화이팅! 

 

 

Figma 활용법 (2) 5주차 1-1 

다이얼로그

컨테이너 컴포넌트와 모달

다이얼로그 컴포넌트
츠케박스와 ㅏ라디오
UI 키트 완성하기

• 모달 
  
  • 대부분 버튼 컴포넌트에 파운데이션 또는 컴포넌트가 여러개 합쳐진 개념을  합성 컴포넌트
    (Compound Component) 라고 불림 
  • 이러한 컨테이너 컴포넌트에는 바텀시트, 다이얼로그, 리스트, 카드 등 복잡한 구조의 컴포넌트들이 있음

• 모달
  
  • 팝업: 화면위에 새로운 화면을 띄워주는 경우 
  • 팝업의 유형: 
    • 윈도우 팝업: 새로운 브라우저창을 띄우는것 허나 요새는고아고 악성코드등을 방지하기 위해서 팝업 허용이 들어가야해서 그리고 사용자 입장에서 매우 불편함. 
    • 레이어 팝업: 새로운 창이 아니라 현재 화면에서 컴포넌트로 만든 레이어(층)을 하나 더 보여주는 개념
    • 모달 팝업: 사용자가 행동을 취하기 전까진 사용자가 까맣게 가려진 뒤쪽 가려진 화면을 조작 할 수 없음.
     

모달과 레이어 팝업의 차이점? 

팝업/ 토스트/ 바텀시트/다이얼로그/사이드바 . 등많은 UI 들이 모달로 사용되고 있음. 

 

라이트박스 UX

• 라이트 박스는 스크림, 딤드, 딤레이어, 오버레이 등으로 불림
• 모달 UI를 사용할 떄는 일반적으로 뒤에 가려진 화면을 사용할 수 없다 는 것을 보여주기 위해 반투명한 층을 만들어주고 
• 이반투명하 층을 라이트박스 라고 불림
• 사용자에게 모달과 배경을 명확하게 분리해주고 집중해야하는 부분을 안내하기 위한 목적이며 모달에 반드시써야하는것은 아님.
• 라이트박스를 누르면 사용자가 취소, 또는 뒤로 가기를 하는것으로 간주함.
  
  • 라이트 박스를 누르면 모달을 열기 전으로 돌려주는것이 일반적이나, 매우 중요한 선택을 해야하는 순간이라 뒤로 돌아갈 수 없거나 돌아가면 지금까지의 진행상황이 모두 삭제되는 경우라면 라이트 박스를 눌러도 꺼지지 않게 해야함. 

예시) 네이버 지도

사이드바를 열고 어두운 부분을 누르면 사이드바가 닫힘.

이런 모달에 어떠한 정보성이나 복잡한 입력값등을 입력하다가 모르고 어두운 부분을 클릭할 때는 꺼지지 않도록 고려해 주어야 함.

모달사용시 주의사항

• • 모달 팝업의 자체가 사용자가 원래 쓰고 이던 화면을 잠가버리고, 사용자가 뭔가 행동을 하기 전까진 풀어주지 않음.
  • 따라서 사용자의 자연스러운 흐름을 방해하는 셈이며 그만큼 사용자가 최종 목적지까지 가는 시간이나 비용을 증가시키기 때문에 모달이 많을 수록 사용자가 불편해 할 가능성이 높아짐. 

따라서 사용자를 방해하면서까지 꼭 반드시 확인해야 하는 부분이거나 또는 그만큼의 중요도가 있는 시점에 사용해야 하는것이 모달임. 


1-3 다이얼로그 컴퍼넌트

• 컴퍼넌트 . 중컨테이너에 해당하는 컴포넌트
  • 다이얼로그는 사용자에게 중요한 선택을 받고 상요자가 선택한 행동을 확인하는 컴포넌트 
  • 다이얼로그 (dialogue) 는 대화 ( converstaion) 대화임.
  • 사용자의 의사를 묻고 답을 얻을 때 사용함 컨테이너 컴포넌트이면서 동시에 모달 속성을 가진 컴포넌트 
• 현업에서 말하는 모달이라는 말은 실제로 다이얼로그 컴포넌트를 가르킬 때가 많음

이런식으로 사용자의 의사를 묻고 답을 얻을 때 사용.

다이얼로그의 구조

• • 컨테이너: 다이얼로그 안에있는 요소들을 감싸고 있는 프레임
  • 헤더: 다이얼로그의 제목, 부가설명이 들어간 제목 부분
    • 제목: Title, Heading: 다이얼로그의 제목들 
    • 부제목 : Subtitle, Description, Hint Text : 다이얼로그의 내용을 설명하거나 제목을 뒷받침하는 보조 내용
    • 헤더 부분에는 썸네일 이미지나 아이콘, 닫기버튼 등도 들어갈 수 있음

액션 

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

다이얼로그 설계 유의점.

• 1) 선택지의 유형에 따라 조작법이 달라짐 
  • 사용자가 A 또는 B를 선택해야 하는 상황과, 사용자에게 경고 또는 확인 등을 표시할 떄가 다름
  • 일반적으로 전자의 경우를 다이얼로그, 후자의 경우를 얼럿 (Alert)라고 불림
  • 다이얼로그의 경우는 라이트박스를 누르면 취소 또는 닫기를 누른 것과 동일함
  • 반면에 얼럿의 경우에는 사용자가 반드시 알아야 하는 중요한 서비스 상태와 관련이 깊기 때문에 사용자가 반드시 버튼을 눌러 
    확인하거나 직접 취소를 눌러 닫아야함 
   

왼쪽은 다이얼로그 : 라이트 박스를 누르면 취소 또는 닫기를 누른것과 동일. 오른쪽은 얼럿의경우로써 사용자가 반드시 알아야하는 중요한 서비스 상태와 관련이 깊기 때문에 사용자가 반드시 버튼을 눌러 확인하거나 직접 취소를 눌러 닫아야함.

다이얼로그: 사용자 흐름에서 필수로 거쳐야 . 할때. ㅏ용

다이얼로그는 필연적으로 사용자를 방해함

그만큼 중요한 시점에 쓰거나 반드시 받아야 하는 정보만 받아야함.

만약 사용자가 꼭 확인해야하는 중요도가 덜한 부분이라면 다이얼로그나 얼럿을 사용하지 말것!!!!!!!

해당처럼 꼭 중요도가 있지 않은 내용이라면 오른쪽의 토스트/스낵바를 사용하며, 토스트/스낵바는 사용자가 선택한 행동의 결과 또는 처리 결과를 안내 할 때 사용함.

 

직접 만들어 본 다이얼로그 

 

 

 

1-4 컨트롤 요소 이해하기

• 사용자의 선택을 돕는 컨트롤 요소 
• 컨트롤 컴포넌트의 종류
  • 체크박스, 라디오, 스위치(토글), 슬라이더

• 컨트롤 요소 크기 자체가 작더라도 실제로 누를 수 있는 공간은 오른쪽 처럼 . 더넓게 잡아주기 
• 또한 라벨을 누르더라도 컨트롤 요소가 작동하게 하는것이 일반적임. (예를들면 체크박스와 + 글자텍스트 함께 눌러지도록 제작)
• 닐슨 노먼 그룹에서 실제 화면 크기를 기준으로 최소 1cm * 1cm 권장함.

• 컨트롤 요소와 라벨(글자)랑 같이 정렬하는법 
  • 두 요소의 세로 높이값을 같이 맞춰주기 (글자의 행간에 맞추기) 
  • 라벨의 세로는 행간과 같기에 컨트롤의 사이즈를 행간에 맞추면 됨. 
   

체크박스

• 체크박스는 여러 선택지 중 1개 이상을 선택할 때사용하는 컨트롤 컴포넌트이며 라벨과 (텍스트)와 함께 쓰임
• 체크박스는 여러개를 선택 할 수 있음.
• 아무것도 선택 안할 수도 있음.

24px * 24px 로 만드는것을 추천함. 왜냐하면 4배수 이기 때문에 매우 적합하고 일반적인 크기임. 아이콘같은경우도 

이크기로 정하는 경우가 많음

라디오 버튼 완성!!!!

라디오버튼

• 라디오 컴포넌트의 정의: 일반적으로 라벨과 함께쓰임.
• 단일선택만 가능함. 여러개를 동시에 선택 불가 
• 무선택은 불가 따라서 기본값은 사용자가 가장 많이 설정하는 설정값으로 만들어 놓음