🐨CoalaCoding
DocsExamplesTry itBoardB반B반
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • Web Publishing
  • React
  • Python

커뮤니티

  • 게시판
  • 예제 모음
  • Try it 에디터

기타

  • GitHub
  • 관리자
© 2026 CoalaCoding. All rights reserved.
  • topBtn
  • rollingBanner
  • menu
  • stickyMenu
  • accordion
  • swiper
  • activeMenu
  • slide
  • tab
  • scrollEffect
  • ajax
  • tabSlide
  • adaption
  • 좋은-디자인을-위한-요소
  • 논리적vs물리적해상도
  • 게슈탈트이론
  • 색채심리학
  • 황금비율
  • 컬러모드
  • 디자인실무용어
  • 이미지파일의특징
  • 폰트와사이즈
  • 레이아웃기초
  • 10가지법칙
  • 아이트래킹
  • 색상을성공적으로고르는방법
  • 타이포그래피10가지팁
  • 스타일가이드만들기
  • 모바일디자인버튼
  • 조형요소
  • 6가지비주얼체계규칙
  • 아이콘디자인이론
  • 해상도와그리드시스템
  • 피그마란
  • 작업환경세팅
  • 인터페이스예제
  • 기능심화
  • 인터페이스설계
  1. 홈
  2. 문서
  3. HTML & CSS
  4. UI 컴포넌트
  5. 조형요소

조형요소

디자인의 기본 조형요소인 점, 선, 면의 특징과 시각적 느낌을 알아봅니다

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

조형요소

모든 조형의 최소 단위로 더 이상 나눌 수 없는 것을 말합니다. 크기를 갖고 있지 않고 선의 끝과 시작, 선들이 만나거나 교차하는 곳 등에 존재하며 위치를 표시합니다.

공간에 한 점을 두면 집중력이 생기고, 중심에 있음으로써 주목성과 안정감이 생깁니다.

  • 각 점을 가깝게 함으로써 면을 느끼게 합니다.
  • 두 점을 가깝게 떼어 놓으면 선의 효과가 생깁니다.
  • 두 점을 멀리 떼어 놓으면 분산효과가 생깁니다.

(1) 점

점의 특징


(2) 선

점의 연장으로 위치만 있고 폭과 부피가 없으며, 이동에 따라 직선, 곡선이 생깁니다. 방향의 길이, 굵기, 형태에 따라 속도감, 운동감을 표현합니다.

선의 느낌

  1. 직선 : 강한 느낌, 속도감, 긴장감, 직접성, 예리함, 명쾌, 간결, 남성적 요소
  2. 가는 선 : 섬세, 예민, 미약함 속에서 가진 팽팽한 긴장감
  3. 굵은 선 : 혼쾌, 중후, 직선이 가지는 힘찬 긴장감, 힘있는 느낌
  4. 수평선 : 안정, 침착, 고요, 확대, 무한, 정적인 느낌
  5. 긴 선 : 시간성, 지속성, 약간 느린 운동감
  6. 붓 연필선 : 개방적 요소가 강하고 태평적인 느낌
  7. 사선 : 동적이고 불안한 느낌, 불안정한 속에서도 활동력이 있는 현대적이고 젊음이 넘치는 에너지, 시각적 소구력이 강함
  8. 기하학적인 선 : 정확하고 긴장되며 기계적인 느낌
  9. 곡선 : 유연, 풍요, 우아, 간접적, 경쾌, 약동, 리드미컬, 온화 등의 감정, 여성적 요소
  10. 기하곡선 : 현대적이고 예리한 합리적인 리듬을 표출
  11. 유기적인 선 : 부드러우며 자유스러운 느낌
  12. 자유 곡선 : 변화가 있고 유연성이 있는 리듬을 표출

선의 종류 1

선의 종류 2


(3) 면

선이 움직이면서 생기는 자취이며, 원근감과 질감을 표현할 수 있고, 색과 결합하여 공간감이나 입체감을 줄 수 있습니다.

면의 종류

  1. 기하학적인 면 : 신뢰감, 안정감, 강하고 간결, 명료한 느낌
  2. 직선적인 면 : 강함, 예민, 직접, 남성적, 명쾌, 대담, 활발한 느낌
  3. 유기적인 면 : 자유로움, 예민함, 직접성, 대담성, 활발한 느낌
  4. 불규칙한 면 : 자유로움, 재미, 불확실함, 무질서, 방심, 단정치 못함, 신경질적인 심리적 특성

면의 종류

목차

  • 구문