[내배캠,3주차] UX/UI Figma 활용법 3

힝구·2024년 3월 8일
3주차UX/UI디자인UXUI강의figmauxui내배캠디스플레이와픽셀디자인시스템반응형분기점과그리드컬러스타일파운데이션폰트스타일피그마
4

UXUI

목록 보기
41/54

✳️ 디스플레이와 픽셀, 배수

1. 디스플레이와 픽셀의 개념

  • 디지털 화면(TV나 일반적인 모니터)을 디스플레이라고 하며, 픽셀(Pixel)로 이루어짐

2. 해상도

  • 해상도는 디스플레이의 선명한 정도, 픽셀의 개수를 의미
    • 해상도가 같다면, 화면 크기가 클수록 픽셀 한 칸의 크기도 커짐
    • 화면 크기가 같다면, 해상도가 높아질 수록 픽셀 한 칸의 크기는 작아짐
    • 일반적으로 화면 크기가 클 수록 해상도도 높음
    • 면적 당 픽셀 갯수가 더 많다면, 더 세밀한 묘사가 가능
      • 8x8 해상도는 4x4 해상도보다 면적 당 픽셀 갯수가 4배 많기 때문에 4배 더 선명하고 세밀하게 표현할수 있음.

3. 모바일 앱의 사이즈

  • 기준이 되는 사이즈를 하나 정해서 디자인 함. 그 사이즈를 1배수 디자인이라고 함.
    (1배수 = 원본 사이즈 100%)
  • 권장하는 1배수 사이즈 (🔗 픽셀 배율 확인할 수 있는 곳)
  • 지금은 아이폰의 경우 375 812, 안드로이드의 경우 360 800을 권장

4. 디자인 사이즈와 실제 사이즈의 원리

  • 픽셀 배율 확인할 수 있는 곳
  • 구현과정 : 디자인개발 > 렌더링 > 업스케일, 다운스케일
    • 1배수 사이즈로 디자인하고 개발기기는 코드를 읽고 디자인으로 바꾼다음, 자기 배율만큼 확대 또는 축소한다. 기기 실제 해상도에 맞게 미세하게 조정을 마친 후 화면에 띄우게 됨


✳️ 분기점과 그리드

1. 분기점(Breakpoint)의 개념

  • 디스플레이의 해상도에 따라 각각 다른 화면을 보여주기 위한 기준점
  • 스마트폰 / 태블릿 / 데스크톱이나 노트북 등 사용자의 디바이스 화면 크기를 고려해서 디자인을 나눌 수 있어야 함

2. 일반적인 분기점 정하기

  • 데스크탑(1024px이상), 태블릿(768px이상~1024px미만), 모바일(768px미만)의 3가지 기준점을 세우는데 가로 길이를 기준으로 함
  • 태블릿은 생략하거나, 태블릿 해상도 전체를 모바일 분기점으로 통합하는 경우가 많음. 태블릿 사용자가 데스크톱과 모바일에 비하면 매우 적기 때문
    📎 디자인에 유용한 통계자료

3. 그리드(Grid)의 개념

  • 화면에 디자인을 배치하는 가이드라인
  • 반응형 웹이 분기점마다 디자인을 바꿀 때, 그리드를 따라 정렬됨. 그리드를 사용하는 이유는 균형감 있게 배치, 전체적인 완성도를 올리기 위해서다.

4. 그리드 만드는 방법

  • 일반적으로 데스크톱 화면을 기준으로 12칼럼 그리드(12 Column Grid)를 사용함.
    • 12개인 이유 : 짝수면서 1, 2, 3, 4, 6, 8, 10, 12로 나눠서 유연하게 배치할 수 있다는 장점이 있어 자주 사용됨

5. 그리드의 구조

  • 칼럼은 유닛(Unit)과 거터(Gutter)로 이루어지며, 유닛은 실제 콘텐츠를 정렬하는 기준선이고, 거터는 유닛과 유닛 사이의 여백이다.
  • 맨 양끝의 칼럼 끝에는 거터 절반이 남는데, 이건 좌우 여백으로 사용
  • 자주 사용하는 그리드 : 960 12 Column Grid / 1200 12 Column Grid / 1440 12 Column Grid


✳️ 8포인트-그리드 디자인(UI를 배치할 때의 가이드라인)

1. 8포인트-그리드 디자인의 개념

  • 8포인트 그리드는 간격이나 크기 등을 8, 16, 24, 32, … (8의 배수)로 맞추는 방법
  • 다른 디자이너나 개발자는 처음 보는 디자인을 보더라도 그 규칙을 적용하기만 하면 됨

2. 왜 하필 8인가?

  • 8은 1.5배, 2배, 3배, 4배 하더라도 깔끔하게 떨어져요! (심지어 0.75배를 해도 정수, 1.25배를 해도 정수)
  • 디자인을 망가뜨리지 않고 축소할 수 있고 유연하게 대처할 수 있음.


✳️ 반응형(Responsive)과 적응형(Adaptive)

1. 반응형 디자인과 적응형 디자인

  • 반응형 : 해상도의 변화에 실시간으로 반응
  • 적응형 : 해상도가 변하더라도 한번 적응하면 움직이지 않은 고정된 디자인

2. 반응형 웹사이트 그리드 만들기

  • 1) 플러그인 : 검색창에 ‘Responsive’ 를 검색 > run
  • 2) 데스크탑 : w960 프레임 > 그리드 섹션에 Columns로 변경 > 카운트 12, 타입 Center, Width 60, Gutter 20으로 설정
  • 3) 태블릿 : w768 프레임 > 그리드 섹션에 Columns로 변경 > 카운트 8, 타입 Stretch, Margin 20으로 설정
  • 4) 모바일 : w320 프레임 > 그리드 섹션에 Columns로 변경 > 카운트 4, 타입 Stretch, Margin 20으로 설정
  • 1,2,3,4를 완료했으면 1920x1080 프레임 생성 > 'Responsive' 플러그인 실행 > 프레임 선택 후 Responsive Frame 선택 > 만들어둔 2,3,4 프레임 선택 후 플러그인 내 Input Frames 선택


✳️ 디자인 시스템

1. 디자인 시스템의 개념

  • 반복적인 UI를 효율적으로 관리할 수 있고 팀 전체가 일관적으로 이해할 수 있다.
  • 장점 : 시간과 비용이 줄어듬, 누가 만들어도 동일한 품질의 제품을 설계할 수 있음
  • 단점 : 과정이 오래 걸림, UI가 과하게 많아질 수 있음, 혁신이 줄어듬

2. UI키트와 디자인 시스템의 차이

  • UI키트 : 사용하는 규칙과 방법은 없고, 단순히 UI를 모아둔 것

  • 디자인 시스템 : UI 구조, 쓰는 방법, 유의해야 하는 부분까지 상세하게 적혀 있는 문서

3. 디자인 시스템의 구성 요소

  • 기초 재료가 되는 ①파운데이션, 기초 재료를 이용해 만든 구성품인 ②컴포넌트가 있다.

4. 아토믹 디자인 시스템

  • 원자를 모아서, 분자를 만드는 게 아토믹 디자인 시스템의 핵심 개념 즉, 원자를 결합해서 기능할 수 있는 최소 단위의 분자를 만듦

5. 참고할 디자인 시스템



✳️ 파운데이션

1. 파운데이션이란?

  • 컬러, 폰트, 레이아웃, 곡률, 간격 등은 기초 재료로 구성품인 컴포넌트를 만들기 위해 사용하는 공통 재료

2. 파운데이션 구성

  • 색상/서체/아이콘/레이아웃(간격,여백,곡률,그리드,고도)


✳️ 컬러 스타일

1. 디지털 환경에서 색상이 보이는 원리

  • RGB와 Hex Code : RGB는 빛의 3원색으로 구성되는 화면, 16진수(Hexadecimal)로 변환해서 읽는 Hex Code
  • 컬러 프로파일(Color Profile) : 디스플레이가 코드를 해석할 때 사용하는 색 기준표

2. 컬러 스타일의 개념

  • 디자인 시스템에서 사용할 색상을 모아두는 팔레트

3. 1:3:6 법칙

  • 전체적으로 균형을 만들어 주고 사용자가 집중해야 하는 부분을 더 쉽게 보여줄 수 있다

4. 색상 정하기 & 색상 팔레트 만들기

  • 'Coolers'플러그인 : 색상 조합 만들어줌
  • 'Styler'플러그인 : 배경색이나 폰트를 자동으로 스타일에 추가

5. 색상 스타일 정리하기

  • 'Auto Documentation'플러그인 : 등록한 컬러와 폰트 스타일을 캔버스에 문서 형태로 정리해줌

6. [참고]컬러 스타일을 만들 때 도움되는 개념 및 방법론



✳️ 폰트 스타일

1. 폰트 스타일의 개념

  • 다른 말로는 폰트 스케일이라고도 하는데, 스케일은 일정한 규칙에 따라 정렬된 하나의 세트를 뜻함.

2. 폰트 스타일의 구성

  • 패밀리(Family), 굵기(=무게감, Weight), 크기(Size), 행간(Line-height), 자간(Letter-spacing)
    • 굵기는 이 글자가 얼마나 더 중요한지를 알려주기 때문에 ‘무게감’이라는 표현을 사용
    • 폰트 크기는 일반적으로 16px 부터 시작하고, 2px 씩 줄이거나 늘림. 20px 이상부터는 제목에 사용함.
    • 행간은 제목처럼 굵고 큰 폰트는 120~135%, 본문의 경우 150%가 제일 좋다.

3. 폰트 스타일 만들기

  • 본문 : 굵기를 Regular, 폰트 사이즈를 16px, 행간을 150%로 적용 > 2개 복사 > 폰트 사이즈를 14px, 하나는 18px로 적용
  • 제목 : 굵기를 Bold, 폰트 사이즈를 16px, 행간을 135%로 적용 > 2개 복사 > 폰트 사이즈를 14px, 하나는 18px로 적용
  • 만들어둔 텍스트 레이어를 모두 선택한 뒤, Styler 플러그인에서 Generate Styles를 선택

4.[참고] 폰트 스타일을 만들 때 도움되는 개념 및 방법론



✳️ 피그마 실습(숙제)

  1. 회색조(Grayscale) : 일반적인 글자 등에 사용하는 기본적인 회색 팔레트
    • 1) 회색조 컬러 팔레트 만들기
    • 2) 'Styler'플러그인을 사용해 컬러 지정 하기 (gray/50 ~ gray/900)

  1. 폰트 ▶︎ 큰 제목(Heading, Headline) 가이드 라인

    • 1) 폰트 스타일 만들기
    • 2) 'Styler'플러그인을 사용해 폰트 스타일 지정 하기
    • 3) 'Auto Documentation'플러그인을 사용해 폰트 가이드라인 만들기

  2. [추가] 컬러 스타일 지정해보기

    • 1) 'Styler'플러그인을 사용해 컬러 도출하기

    • 2) 도출한 컬러 팔레트 만들기

    • 3) 'Auto Documentation'플러그인 사용해 가이드라인 만들기

🔗 실제작업파일보기

profile
힝구
UI/UX디자인 - 스터디/아티클/리뷰
이전 포스트

[내배캠,3주차] UX/UI Figma 활용법 2

다음 포스트

[내배캠UX/UI,3주차] 2024.03.08 WIL

0개의 댓글