Skeuomorphism
금속 다이얼과 눈금 · 빛을 받는 재질 · 물리 조작부를 닮은 형태
VISUAL ATLAS 2026.09 EDITION
스타일의 차이를 보고,
내 웹페이지에 적용해 보세요.
42개 시각 스타일 · 구성·상호작용 참고 10개 · 실제 제작한 예시 화면
01 / VISUAL STYLES
42개 시각 스타일
색·재질·글자·이미지로 구별하는 시각 스타일입니다. 화면 배치와 동작은 아래 구성·상호작용 참고에서 살펴보세요.
Skeuomorphism
금속 다이얼과 눈금 · 빛을 받는 재질 · 물리 조작부를 닮은 형태
Flat Design
명료한 단색 면 · 단순한 도형과 아이콘 · 선택 상태에만 쓰는 얕은 그림자
Neumorphism
바탕과 같은 표면색 · 밝고 어두운 양방향 그림자 · 솟은 버튼과 들어간 조절부
Glassmorphism
서리 낀 반투명 패널 · 겹친 면의 밝은 테두리 · 절제된 배경 위의 흐림과 깊이
Liquid Glass
두꺼운 투명 굴절 테두리 · 유리 뒤에서 휘어 보이는 격자 · 볼록한 렌즈형 조작부
Claymorphism
둥글고 두툼한 부피 · 점토 같은 부드러운 음영 · 배경에서 분리된 실루엣
Aurora UI / Mesh Gradient
여러 색이 넓게 번지는 배경 · 매끈한 색의 연결 · 글자 뒤에 남긴 차분한 공간
Minimalism
넓은 여백 · 적은 요소와 명확한 위계 · 핵심 행동에 모이는 시선
Swiss / International Typographic Style
일관된 정렬선 · 비대칭 그리드 · 굵기와 크기로 나눈 타이포그래피
Editorial Design
큰 표제와 세리프 글자 · 본문·인용·캡션의 읽는 리듬 · 잡지처럼 나눈 단과 이미지
Web Brutalism
기본 글꼴과 노출된 구조 · 장식을 줄인 단순한 문서 · 링크와 구획의 거친 경계
Neobrutalism
굵은 검정 테두리 · 번짐 없는 단단한 그림자 · 명료한 색 면과 큰 버튼
Anti-design
정렬을 벗어나는 제목 · 일부러 겹친 요소 · 예상 밖의 비대칭 배치
Maximalism
큰 글자와 여러 색 · 겹겹이 쌓인 이미지 · 높은 정보 밀도와 반복
Memphis
지그재그·점·기하 패턴 · 장난감 같은 색 조합 · 규칙에서 조금씩 벗어난 배치
Art Deco
대칭으로 펼친 기하 장식 · 가늘고 긴 글자 · 금속색 선과 단계형 테두리
Bauhaus-inspired Design
원색과 흑백의 비대칭 편집 · 건축 이미지와 큰 글자의 결합 · 원·직선·면이 이어지는 모듈
Y2K Aesthetic
크롬처럼 반짝이는 오브젝트 · 산성색과 디지털 광택 · 별·궤도·미래적인 글자
Frutiger Aero
하늘·물·초록의 조합 · 매끈한 구와 유광 패널 · 깨끗한 디지털 자연의 인상
Early Web / Retro Computing
창 테두리와 메뉴 표시줄 · 문서형 링크 목록 · 픽셀 아이콘과 초기 웹의 밀도
Collage / Scrapbook
찢은 종이의 가장자리 · 겹친 사진과 테이프 · 크기가 다른 조각의 편집
Hand-drawn / Doodle
조금씩 흔들리는 선 · 손으로 쓴 듯한 표시 · 화살표와 낙서의 안내
Organic / Nature-inspired
흙·잎·물에서 온 색 · 불규칙하고 유연한 곡선 · 자연물과 넓은 여백
Surreal / Hyperreal
현실에 없는 크기와 위치 · 정교한 빛과 그림자 · 익숙한 사물의 낯선 결합
Cinematic / Photography-led
해안 장면의 영화식 빛과 구도 · 젖은 바위와 안개의 사진적 질감 · 장면을 이어 보여주는 필름 스트립
Pixel Art
격자 단위로 만든 형태 · 계단처럼 꺾이는 윤곽 · 제한된 색과 픽셀 글자
ASCII Art
문자만으로 구성한 그림 · 일정한 글자 간격 · 명암을 만드는 문자의 밀도
Dopamine Color / Color Blocking
높은 채도의 넓은 색 면 · 대담한 보색 조합 · 색 블록으로 나눈 정보
Duotone
두 색으로 나뉜 명암 · 사진과 글자의 일관된 팔레트 · 큰 색 대비와 단순한 구성
Halftone / Print Texture
촘촘하거나 넓어지는 인쇄 점 · 어긋난 잉크의 흔적 · 종이 인쇄물 같은 거친 질감
Cyberpunk
각진 노란 패널 · 청록빛 도시와 검은 바탕 · 산업적 표식과 압축된 제목
Sci-fi HUD / FUI
중앙의 선형 궤도 모형 · 원형 눈금과 좌표 · 정렬된 보조 계기 패널
Synthwave / Retrofuturism
분할된 석양과 보라색 밤 · 빛나는 크롬 제목 · 신시사이저와 네온 원근선
Holographic / Iridescent
접힌 필름의 무지갯빛 반사 · 굴곡에 따라 달라지는 색 · 표면을 확대해 보여주는 사진형 타일
Chrome / Liquid Metal
거울처럼 반사되는 입체 글자 · 밝은 반사면과 깊은 검정 · 거울·브러시·용융 금속의 대비
Glitch / Digital Noise
가로로 잘려 이동한 이미지 · 빨강·청록 채널 어긋남 · 입자와 스캔라인의 흔적
Terminal / Retro Computing
고정폭 글자의 정보 열 · 선 문자로 나눈 패널 · 검은 바탕과 인광색 상태 표시
Dark Tech / Precision Glow
낮은 채도의 검정·청회색 · 얇은 패널 경계와 푸른 가장자리 빛 · 정돈된 제품 화면과 넓은 여백
Oversized Typography
화면을 채우는 한글 제목 · 검정·주황·크림의 면 대비 · 글자의 크기와 잘림으로 만든 구도
Isometric Illustration
같은 방향으로 정렬한 건물 축 · 단면처럼 열린 작은 학습 공간 · 계단과 연결 통로의 관계
Risograph / Spot-color Print
빨강·파랑 별색의 겹침 · 종이 섬유와 거친 잉크 입자 · 색판이 살짝 어긋난 글자와 꽃
Y3K / Cyber-organic
유기적으로 뻗는 크롬 조형물 · 진주색·반투명 표면 · 비현실적인 백색 미래 공간
검색어를 줄이거나 분류를 바꿔 보세요.
02 / LAYOUT & INTERACTION
10개 기법
아래 항목은 정보를 배치하고 사용자의 행동에 반응하는 방법입니다. 하나의 기법에 여러 시각 스타일을 적용할 수 있습니다.
벤토·카드·분할·캔버스는 내용의 묶음과 읽는 순서를 정하는 배치 기법입니다.
타이포그래피 모션·스크롤·피드백·3D는 사용자의 조작과 화면 변화에 관한 기법입니다.
Kinetic Typography
글자의 위치 변화 · 단어별 크기와 강조의 변화 · 시간 순서로 읽히는 제목
Scrollytelling
단계마다 달라지는 설명 · 본문과 함께 바뀌는 도식 · 수집·분석·검토의 이야기
Guided Scrolling
현재 장을 알려주는 목차 · 스크롤에 따른 진행 표시 · 다음 읽을 위치의 안내
Parallax
서로 다른 속도의 레이어 · 전경과 배경 사이의 시차 · 작은 이동으로 느껴지는 깊이
Microinteractions
행동 전후의 상태 변화 · 성공을 확인하는 문구 · 짧고 목적이 분명한 반응
Interactive 3D
정면·측면의 시점 변화 · 회전하며 드러나는 입체 면 · 사용자가 결정하는 관찰 방향
03 / CURRENT CONTEXT
확인한 디자인 플랫폼의 자료를 묶은 편집 관점입니다. 발표·갱신 시점과 도감의 확인일을 구분해 읽어 주세요.
뉴모피즘·클레이·유리·인쇄 질감을 비교하며 표면의 표현을 살펴봅니다.
Adobe 2026 크리에이티브 보고서 ↗스크랩북과 손그림, 편집형 구성으로 화면에 고유한 인상을 만드는 흐름을 읽습니다.
Canva 2026 편집 자료 ↗명료한 문안과 고유한 색·효과가 함께 쓰이는 방향을 참고합니다.
Webflow 2026 웹 디자인 동향 ↗실제 기능을 설명하는 화면과 상상의 이미지를 구분해 구성합니다.
Adobe 2026 크리에이티브 보고서 ↗2026년 8월 갱신된 홀로그램 해설을 바탕으로 간섭색과 미래적 재질을 살펴봅니다. 크롬·Y3K는 비교를 위한 연관 표현입니다.
Envato 홀로그램 해설 · 2026년 8월 갱신 ↗뉴모피즘·콜라주·맥시멀리즘처럼 과거의 표현도 현재 편집 목록에서 함께 다뤄집니다.
Figma 2026 웹 디자인 목록 ↗자료 확인 범위는 2026년 9월 20일까지입니다. 기존 스타일과 최근 동향을 함께 다룹니다. 웹 전체의 채택률이나 인기 순위를 나타내는 목록은 아닙니다.
04 / LOOK CLOSER
0 / 3개 선택
각 그림은 주제와 정보량이 다른 학습용 예시입니다. 색·질감·글자·배치에서 어떤 차이가 나는지 살펴보세요.
도감 카드의 ‘+ 비교’를 눌러 세 개까지 담아 보세요.
물체를 닮게 하는가, 표면을 솟게 하는가, 뒤가 비치게 하는가?
단순한 외형, 정보 절제, 그리드, 읽는 리듬은 어떻게 다른가?
거칠게 보여도 행동과 읽는 순서를 이해할 수 있는가?
광택 있는 미래주의, 초기 문서형 웹, 픽셀과 문자는 어떻게 다른가?
패턴, 종이 조각, 손의 선, 인쇄 점은 각각 무엇을 전달하는가?
배경의 빛, 자연색, 강한 색 면, 사진의 색 변환 중 무엇이 필요한가?
이야기를 전개하는가, 위치를 알려주는가, 깊이를 연출하는가?
요약·목록·관계·반응·공간 탐색 중 어떤 정보가 중요한가?
도시적 긴장, 계측, 복고적 향수, 제품의 정밀함, 유기적 미래 중 무엇을 표현하는가?
뒤가 흐려지는가, 굴절되는가, 표면의 색이 바뀌는가, 환경을 반사하는가?
05 / PUT IT TO WORK
스타일·배치·상호작용을 함께 고를 때 참고할 조합입니다.
목차, 본문 폭, 인용과 캡션부터 설계합니다.
핵심 기능과 실제 화면, 다음 행동을 먼저 정합니다.
일정·장소·주요 행동을 쉽게 찾도록 만듭니다.
사진 설명과 기록 순서, 출처를 함께 편집합니다.
단계별 메시지와 움직임 없이 읽을 요약을 마련합니다.
세 시대의 표현을 비교해 하나를 선택하고 자료의 원맥락을 설명합니다.