Grid

• 수직 수평으로 분할된 격자무늬로 화면을 세로로 나누는 컬럼 시스템을 주로 사용한다.

• 화면을 격자로 나눈 다음 그 격자에 맞춰 콘텐츠를 배치하는 방법

• 컬럼 그리드 시스템을 주로 웹디자인에서 사용

  • Margin, Column, Gutter로 구성됨

  

• 컬럼 그리드 시스템을 활용할 때 화면 가로 길이에 따라서 컬럼 개수가 달라지도록 코드를 작성하면, 다양한 디바이스와 다양한 환경에 유연하게 대응하는 UI를 만들 수 있으며, 이를 반응형 웹이라고 부른다.

column

• 표준적으로 휴대폰에서 4개, 태블릿에서 8개, PC에서는 12개의 컬럼으로 나눈다
• 상대 단위를 사용하여 콘텐츠가 창 크기에 맞춰서 크기가 변하도록 설정하는 것이 좋다.

Gutter

• Column 사이의 공간으로 컨텐츠를 구분하는데 도움을 준다

User flow

• 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 뜻한다.
• 보통 다이어그램을 그려서 정리
• 장점
  • 사용자 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정할 수 있음
  • 있으면 좋은 기능을 발견하여 추가하거나 없어도 상관 없는 기능을 발견하고 삭제할 수 있음
• 기획시 사용자 흐름을 빈틈 없이, 보다 더 편리하게 다듬어 나가는 과정을 거치면 UX를 개선할 수 있다.

작성 규칙

• 직사각형 : 사용자가 보게 될 화면 ( ex. 회원 가입 페이지, 로그인 페이지 … )
• 다이아몬드 : 사용자가 취하게 될 행동 ( ex. 로그인, 버튼 클릭, 업로드 … )
• 화살표 : 직사각형(화면)과 다이아몬드(행동)를 연결시켜주는 화살표
• 이외의 도형이 있지만 이 세가지는 필수로 사용

다이어그램 도구

• https://www.figma.com/figjam/