오늘은 디자인 원리의 기초인
레이아웃 / 타이포 / 색상 이론을
간단하게 정리하고
이를 피그마 프로그램으로 연습해 보도록 하자
-
레이아웃 구성 원리
| 그리드 시스템 | 정렬 및 간격 | 반응형 디자인 |
| 레이아웃의 균형과 정렬 간격을 체계적으로 관리하기 위한 기본 틀 | 좌우, 상하 정렬을 통해 시각적 안정성 확보 | 다양한 디바이스 환경에서 디자인이 올바르게 표시되도록 구성 |
| 컬럼, 행, 간격을 설정하여 일관된 다자인 유지 | 마진, 패딩을 사용하여 콘텐츠 간의 여백을 설정 |
타이포그래피와 색상이론
*타이포 그래피*
| 기본 요소 | 계층 구조 | 가독성 |
| 폰트 종류, 크기, 굵기, 행간, 자간등을 이해 | 제목, 본문, 캡션 등의 텍스트 요소 간 차이를 두어 정보 계층을 명확하게 함 | 텍스트 배치와 간격 조절로 읽기 쉬운 디자인 만들기 |
-
*색상 이론*
| 색상 조합 원리 | 심리적 효과 | 사용자 경험 |
| 보색, 유사색, 트라이어드 색상 등 다양한 조합 기법 | 색상이 주는 느낌과 분위기를 고려하여 팔레트 구성 | 색상 대비를 통한 시각적 명확성과 접근성 개선 |
실습하기
*레이아웃 그리드 설정*
1. 프레임에서 와이어 프레임을 세팅한다.
2. 우측 속성에서 레이아웃 그리드를
활성화하고 칼럼 그리드를 추가한다.
너비, 마진, 간격, 색상등을 조절할 수 있음
*타이포그래피*
하단의 툴바에서 텍스트 도구 선택,
클릭 or 드래그로 텍스트 작성,
우측의 속성 설정에서 스타일 지정
*색상 팔레트 만들기*
1. 도형을 그리고 채우기 클릭,
컬러피커를 통해 색상을 고른다.
헥스코드는 자주 쓰이는
색상코드이기 때문에 사용하는 색상의
헥스(HEX)코드를 컬러칩에 표해두면 편하다.
2. 고른 컬러칩으로 간단한 레이아웃을 구성한다.
오늘은 기본 UXUI 디자인 구성요소인
레이아웃, 타이포, 색상을 익히고
피그마로 활용해보았다.
어도비를 주로 오래 써왔다 보니
아직은 피그마의 UI가 어색해서
버벅거리고 있지만,
확실히 쉬운 인터페이스를 가지고 있다.
앞으로 꾸준히 연습하여
발전해 나가도록 해야겠다.
'UXUI 프로덕트 디자인 > 국비교육일지' 카테고리의 다른 글
| 프로덕트 디자이너 예습일지 - 좋아하는 웹화면 만들어보기 (0) | 2025.11.20 |
|---|---|
| 프로덕트 디자이너 예습일지 - UI 컴포넌트와 프로토타이핑 (0) | 2025.11.19 |
| 프로덕트 디자이너 예습일지 - 피그마 기본개념 (0) | 2025.11.17 |
| 프로덕트 디자이너 예습일지 - 색상이론 (0) | 2025.11.16 |
| 프로덕트 디자이너 예습일지 - 디자인 원리 (0) | 2025.11.15 |