1. 행(Row)과 열(Column)의 차이
1) 행(Row)란?
- 가로(→) 방향으로 데이터를 정렬한 구조.
- 여러 개의 **열(Column)**이 모여 **행(Row)**을 구성.
- 엑셀, 데이터베이스, 테이블에서 한 개의 레코드(Record)를 의미함.
2) 열(Column)란?
- 세로(↓) 방향으로 데이터를 정렬한 구조.
- 여러 개의 **행(Row)**이 모여 **열(Column)**을 구성.
- 엑셀, 데이터베이스, 테이블에서 속성(Attribute)이나 필드(Field)를 의미함.
3) 행과 열 비교
2. 행간(Line Spacing), 자간(Letter Spacing), 커닝(Kerning) 차이
1) 행간(Line Spacing)이란?
- 한 행과 다음 행 사이의 간격을 의미함.
- 가독성에 영향을 주며, 텍스트가 너무 붙으면 읽기 어렵고, 너무 넓으면 흐름이 끊김.
- 보통 1.4~1.6배 정도의 행간이 가독성에 적절함.
2) 자간(Letter Spacing)이란?
- 문자와 문자 사이의 간격을 일정하게 조절하는 것.
- 웹 디자인에서는 CSS 속성 letter-spacing을 사용하여 조절 가능.
- 글자가 서로 붙으면 가독성이 떨어지고, 너무 넓으면 흐트러진 느낌을 줌.
3) 커닝(Kerning)이란?
- 특정 문자 조합 간격을 개별적으로 조정하는 것.
- 자간과 다르게 특정 문자 쌍에만 영향을 줌 (예: 'AV'처럼 시각적으로 불균형한 경우).
4) 비교 정리
| 개념 |
설명 |
예제 |
| 행간(Line Spacing) |
한 행과 다음 행 사이의 간격 |
1.2~1.6배 정도가 일반적인 가독성 유지 |
| 자간(Letter Spacing) |
글자와 글자 사이의 간격 조절 |
letter-spacing: 2px; |
| 커닝(Kerning) |
특정 문자 쌍 간격 개별 조정 |
"A V" 간격 조절 |
3. 서체(Typeface)와 폰트(Font)의 차이 & 세리프/산세리프
1) 서체(Typeface)란?
- 특정 스타일로 디자인된 글자 패밀리 전체를 의미함.
- 예: Helvetica, Times New Roman, Arial.
2) 폰트(Font)란?
- 같은 서체라도 크기, 굵기, 기울기 등이 다르면 각각 다른 폰트로 구분됨.
- 예: Helvetica Regular 12px, Helvetica Bold 16px.
3) 서체의 종류
| 서체 |
설명 |
대표적인 서체 |
| 세리프(Serif) |
글자 끝에 장식이 있는 전통적인 서체 |
Times New Roman, Garamond |
| 산세리프(Sans-serif) |
장식이 없는 모던한 서체 |
Helvetica, Arial |
| 스크립트(Script) |
손글씨 느낌의 서체 |
Pacifico, Brush Script |
4. 제목, 소제목, 본문 간 관계 = 정보 계층 구조(Information Hierarchy)
| 요소 |
역할 |
| 제목(Heading) |
콘텐츠의 핵심 주제 전달 |
| 소제목(Subheading) |
제목을 보완하며, 세부 내용을 그룹화 |
| 본문(Body Text) |
구체적인 정보 설명 및 콘텐츠 전달 |
5. UX 문서 작성 순서: PRD → IA → 와이어플로우
(1) PRD (제품 요구사항 정의서, Product Requirements Document)
| 항목 |
설명 |
| 제품 개요 |
제품의 목적, 목표 사용자 정의 |
| 핵심 기능 |
제공해야 할 주요 기능 목록 |
| 사용자 스토리 |
사용자의 행동 시나리오 |
| UX/UI 요구사항 |
화면 인터페이스와 사용자 경험 가이드 |
(2) IA (정보 구조, Information Architecture)
| 항목 |
설명 |
| 메뉴 구조 |
주요 메뉴 및 하위 메뉴 계층화 |
| 페이지 간 연결 관계 |
특정 페이지에서 어디로 이동할 수 있는지 |
| 내비게이션 설계 |
사용자 경험을 최적화하는 메뉴 구조 |
(3) 와이어플로우 (Wireflow, 화면 흐름도)
| 항목 |
설명 |
| 화면 구성 |
페이지별 레이아웃 및 콘텐츠 배치 |
| 사용자 동선 |
특정 기능을 수행하는 과정에서 거치는 단계 |
| 인터랙션 요소 |
버튼 클릭, 화면 전환 방식 |
6. 6:3:1 컬러 비율 개념 & 스타벅스 예시
1) 개념
- 6(주색, Primary Color) : 3(보조색, Secondary Color) : 1(강조색, Accent Color)
2) 스타벅스 UI 컬러 비율 예시
| 컬러 비율 |
색상 예시 |
역할 |
| 6 (주색) |
스타벅스 그린 (#00704A) |
브랜드의 메인 컬러, 로고, 주요 버튼 |
| 3 (보조색) |
다크 브라운 (#2E1E12) |
내비게이션 바, 텍스트 강조 |
| 1 (강조색) |
크림 화이트 (#F1EDE1) |
포인트 요소, 배경, 하이라이트 |
✔ 6:3:1 컬러 비율을 활용하면 시각적으로 균형 잡힌 UI를 디자인할 수 있음. 🚀