ATLASDESIGN REFERENCE GALLERY
ATLAS GALLERY / 2026.10

구도·조형·시각 원리

각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.

시각적 위계 Visual Hierarchy

크기·명도·위치·간격 차이로 무엇을 먼저 보게 할지 조직하는 원리.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

대비 Contrast

색·밝기·크기·형태의 차이를 이용해 요소를 구분하고 강조하는 관계.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

정렬 Alignment

요소의 기준선이나 가장자리를 맞춰 구조와 관계를 드러내는 방식.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

근접성 Proximity

가까이 놓인 요소를 관련된 집단으로 인식하는 지각 원리.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

반복 Repetition

색·형태·간격·스타일을 반복해 통일성과 예측 가능성을 만드는 방법.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

균형 Balance

시각적 무게가 화면 한쪽으로 과도하게 쏠리지 않도록 구성하는 원리.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

대칭 Symmetry

축이나 중심을 기준으로 요소를 대응시켜 안정적인 구도를 만드는 방식.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

비대칭 Asymmetry

크기·위치가 다른 요소를 대비시키면서 전체 균형을 유지하는 구도.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

리듬 Rhythm

반복과 간격의 변주로 시선 이동에 규칙과 속도감을 만드는 구성.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

도형과 배경 Figure–Ground

주목하는 대상과 그 뒤의 배경을 분리해 인식하는 관계.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

폐쇄성 Gestalt Closure

불완전한 윤곽을 하나의 완성된 형태로 보완해 인식하는 경향.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

연속성 Gestalt Continuity

선이나 배열의 흐름을 따라 요소를 연속된 집단으로 인식하는 경향.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

공통 영역 Common Region

같은 경계나 배경 안에 있는 요소를 관련된 집단으로 보는 원리.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

초점 Focal Point

장면에서 가장 먼저 또는 가장 강하게 시선이 머물도록 만든 위치.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

삼분할 구도 Rule of Thirds

화면을 가로·세로 세 부분으로 나누어 주요 대상을 배치하는 구도 지침.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

황금비 Golden Ratio

약 1:1.618의 비율 관계로, 구성의 참고 비율 중 하나.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

유도선 Leading Lines

도로·선·배치의 방향을 이용해 시선을 특정 대상으로 이끄는 구성.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

프레이밍 Framing

주변 요소로 대상을 둘러 시선을 모으고 맥락을 부여하는 방법.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

실루엣 Silhouette

내부 디테일을 제외한 외곽 형태로 대상을 식별하게 하는 윤곽.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

형태 언어 Shape Language

원·삼각형·사각형 등의 반복되는 조형 특성으로 인상을 전달하는 설계.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

시각적 무게 Visual Weight

크기·명암·색·밀도 때문에 요소가 시선을 끄는 상대적 정도.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

시각적 밀도 Visual Density

정해진 면적에 정보와 시각 요소가 얼마나 집중되어 있는지 나타내는 특성.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

아트 디렉션 Art Direction

색·형태·조명·타이포그래피 등 시각 요소가 같은 의도를 전달하도록 조율하는 작업.

화면·포스터·상세페이지·게임 장면의 시선 흐름과 정보 우선순위를 설계한다.

수치 규칙은 출발점이다. 실제 콘텐츠와 읽기 목적에 맞게 조정한다.

참고 문서

Composition, Form & Visual Principles

Open an entry for its visual reference, comparisons and source-language text.

Visual Hierarchy 시각적 위계

Organizing what viewers notice first through differences in size, brightness, position, and spacing.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Contrast 대비

Differences in color, brightness, size, or shape that distinguish and emphasize elements.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Alignment 정렬

Aligning baselines or edges to reveal structure and relationships.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Proximity 근접성

The perceptual principle that nearby elements are seen as a related group.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Repetition 반복

Repeating colors, shapes, spacing, or styles to create consistency and predictability.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Balance 균형

Arranging visual weight so it does not concentrate excessively on one side.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Symmetry 대칭

A stable composition using corresponding elements around an axis or center.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Asymmetry 비대칭

A composition balancing contrasting elements of unequal size or placement.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Rhythm 리듬

Using repetition and varied spacing to give eye movement a pattern and pace.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Figure–Ground 도형과 배경

The perceptual relationship separating a subject of attention from its background.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Gestalt Closure 폐쇄성

The tendency to perceive an incomplete outline as a complete shape.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Gestalt Continuity 연속성

The tendency to group elements along a continuous line or directional flow.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Common Region 공통 영역

The principle that elements sharing a boundary or background are perceived as related.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Focal Point 초점

The location designed to attract the first or strongest visual attention.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Rule of Thirds 삼분할 구도

A composition guideline that places subjects along thirds of the image's width and height.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Golden Ratio 황금비

A proportion of approximately 1:1.618, used as one possible reference for composition.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Leading Lines 유도선

Lines, paths, or arrangements that direct the eye toward a subject.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Framing 프레이밍

Surrounding a subject with other elements to focus attention and establish context.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Silhouette 실루엣

The outer shape by which an object can be recognized without internal detail.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Shape Language 형태 언어

Communicating character through recurring shapes such as circles, triangles, and squares.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Visual Weight 시각적 무게

An element's relative ability to attract attention through size, contrast, color, and density.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Visual Density 시각적 밀도

The concentration of information and visual elements within a given area.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference

Art Direction 아트 디렉션

Coordinating color, form, lighting, typography, and other visual elements around a common intent.

Designing visual flow and information priorities for screens, posters, product pages, and game scenes.

Numeric rules are starting points. Adjust them to the actual content and reading task.

Reference