UIUX_개념

그리드 및 키라인

ministoy2 2024. 11. 1. 20:12

그리드 및 키라인

그리드: 시각적으로 일관성과 질서를 잡아주는 그래픽 시스템

키라인: 시각적 비율을 유지할 수 있게 해주는 가이드 라인

출처: https://www.remain.co.kr/page/designsystem/grid-keyline.php

아이콘은 반드시 정수로 제작

 

세이프에어리어(Safe Area)

화면의 가장자리에서 콘텐츠가 잘리거나 가려지지 않도록 보장하는 영역

  • 사용자 경험 개선: 콘텐츠가 잘리는 문제 방지
  • 디바이스 호환성: 다양한 화면 크기에서 일관된 디자인 유지
  • 시각적 안정성: 안정적인 레이아웃 제공

시각 보정

같은 영역 안에서의 아이콘 혹은 요소들은 측정 크기가 같아도 시각적으로 보정을 해야함

출처: https://brunch.co.kr/@thinkaboutlove/227

  • 아이콘의 요소가 사각형과 원형이 있다면 px크기가 아닌 실제 넓이에 대응
  • 배경색이 있는 문단에서 배경색이 밝다면 나머지 텍스트와 동일
  • 어두운 배경색 > 텍스트와 문단 넓이를 같게

모바일 앱

  • 접근성: 기기에 설치 필요, 앱 스토어에서 다운로드
  • 사용자 경험: 기기 기능 활용 가능, 오프라인 사용 가능
  • 성능: 더 빠르고 부드러운 성능
  • 업데이트: 수동 업데이트 필요.
  • 비용: 개발 및 유지 관리 비용이 상대적으로 높음

모바일 웹

  • 접근성: 웹 브라우저로 접근, URL 입력으로 쉽게 찾을 수 있음.
  • 사용자 경험: 반응형 디자인, 인터넷 연결 필요.
  • 성능: 로딩 속도가 느릴 수 있음.
  • 업데이트: 자동으로 최신 버전 사용.
  • 비용: 개발 및 유지 관리 비용이 상대적으로 낮음.

웹과 앱 차이

 

정보 구조도(I.A)

제품의 각 페이지와 기능 소개

쉽게 말해 층별 안내도로 생각하면 됨

화면흐름도(Flowchart)

사용자가 어떤 과정으로 이용하는지 시각적으로 정리한 순서도

 

'UIUX_개념' 카테고리의 다른 글

유저 리서치  (1) 2024.11.19
UX 기획 및 리서치 / 용어 정리  (0) 2024.11.18
아토믹 디자인과 합성 컴포넌트의 형태  (3) 2024.10.30
피그마 강의 복습  (3) 2024.10.29
컴포넌트 프로퍼티의 이해  (3) 2024.10.28