Visual Asset Taxonomy

비주얼 어셋 택소노미

일러스트, 다이어그램, 3D, 추상 그래픽을 코드로 만들 때 쓰는 공통 어휘. 기법, 구조, 표면 284개 키워드로 막연한 느낌을 구현 가능한 지시로 옮깁니다.

읽는 법

막연한 느낌을 구현 가능한 지시로

비주얼 어셋을 코드로 만들 때 가장 어려운 건 "이런 느낌"을 코드가 알아듣는 지시로 옮기는 일입니다. 이 사전은 그 사이를 잇는 공통 어휘입니다. 도구가 바뀌어도 이 키워드는 남습니다.

키워드를 읽는 3개 층

기법

어떻게 만들어진 것처럼 보이나

판화 · 디지털 일러스트 · 3D 렌더 · 사진 · 추상 제너러티브

구조

어떤 시점과 배치로 보여주나

아이소메트릭 · 정투영 · 다이어그램 · 구도

표면

선·음영·색·질감·효과를 어떻게 처리하나

선 처리 · 톤 · 색 운용 · 질감 · 광학 효과 · 분위기

막연한 느낌을 옮기는 7축

Rendering

어떻게 만들어진 것처럼 보이나

Perspective

어떤 시점과 공간감인가

Color

색은 어떤 규칙으로 제한되나

Texture

표면은 어떤 질감인가

Composition

화면 안에서 어떻게 배치되나

Subject

대상을 얼마나 추상화하나

Mood

최종 분위기를 만드는 빛과 환경은

역할: 먼저 손댈 순서

Core

먼저 고르는 대표 스타일

Support

결과를 다듬는 보조 조정

Scaffold

구조를 잡는 뼈대

Niche

특수 상황 전용

조합: 어울림과 충돌

어울림

Etching · Cross-hatching

충돌

Etching · Glass Material

키워드마다 어울리는 짝과 충돌하는 짝을 표시해, 함께 쓰면 깨지는 조합을 미리 피합니다.

3

Parts

20 284+

Keywords

Part 1

기법

어떻게 만들어진 것처럼 보이는가: 110개 키워드

판화나 손 드로잉처럼 찍고 그린 듯한 아날로그 제작 기법입니다. 잉크와 종이의 물성이 그대로 드러납니다.

KeywordSampleVisual / PromptBuild · Pairing

Etching

에칭 · Core

금속판 부식 판화풍. 세밀한 선과 고전적 음영

SVG · Image(gen) · Hybrid어울림: Archival Paper Texture, Cross-hatching, Engraved Line, Monochrome충돌: Clay Render, Glass Material, Glitch

Engraving

인그레이빙 · Core

뷰린 각인선. 정밀한 평행선 음영, 고전적 서적 삽화 느낌

SVG · Image(gen)어울림: Archival Paper Texture, Cross-hatching, Hairline, Monochrome충돌: Blur, Clay Render, Glow

Woodcut

목판화풍 · Core

거칠고 강한 면, 굵은 선, 높은 대비의 수공예적 판화

SVG · Image(gen)어울림: High Contrast, Limited Palette, Paper Grain충돌: Blur, Glass Material, Glossy Surface

Linocut

리노컷 · Niche

단순화된 형태, 굵은 면 분할, 거친 수공예적 가장자리

SVG · Image(gen)어울림: Flat Fill, Limited Palette, Paper Grain충돌: Chrome Material, Glow

Lithograph

석판화풍 · Support

부드러운 톤, 손으로 그린 듯한 질감, 회화적 표면감

Image(gen)어울림: Muted, Paper Grain, Soft Shading충돌: Glitch, Neon

Screenprint

실크스크린풍 · Core

선명한 색면, 제한된 팔레트, 포스터 같은 인쇄감

Image(gen) · SVG어울림: Flat Fill, Halftone Pattern, Limited Palette, Screenprint Texture충돌: Blur, Gradient Shading

Risograph

리소그래프풍 · Core

제한된 별색, 인쇄 어긋남, 거친 그레인, 독립 출판물 감성

Image(gen)어울림: Flat Fill, Limited Palette, Misregistration, Risograph Grain충돌: Chrome Material, Glossy Surface, Refraction

Ink Drawing

잉크 드로잉 · Core

펜이나 붓 잉크의 선명한 선과 강한 대비

SVG · Image(gen)어울림: Cross-hatching, Ink Bleed, Monochrome, Paper Grain충돌: Glass Material, Glow

Ink Wash

수묵/잉크 워시 · Core

물에 희석된 잉크의 번짐, 농담, 흐릿한 음영. 동양화 감성

Image(gen)어울림: Ink Wash Shading, Monochrome, Negative Space, Paper Grain충돌: Blueprint Line, Chrome Material, Neon

Pencil Sketch

연필 스케치 · Support

연필 선, 밑그림, 필압이 드러나는 드로잉

Image(gen)어울림: Contour Shading, Hand-drawn Line, Monochrome, Paper Grain충돌: Glossy Surface, Neon

Charcoal Drawing

목탄 드로잉 · Niche

부드럽고 어두운 명암, 거친 번짐, 강한 질감

Image(gen)어울림: High Contrast, Monochrome, Paper Grain충돌: Chrome Material, Clean Vector Line

Watercolor

수채화풍 · Support

물감의 투명도, 번짐, 물자국, 부드러운 색 겹침

Image(gen)어울림: Ink Bleed, Paper Grain, Pastel, Soft Shading충돌: Blueprint, Blueprint Line, Chrome Material

Gouache

과슈풍 · Support

불투명하고 매트한 색면, 부드러운 브러시 자국

Image(gen)어울림: Flat Fill, Matte Paper, Pastel충돌: Glitch, Glossy Surface, Neon

Collage Illustration

콜라주 일러스트 · Core

종이, 사진, 질감, 도형을 오려 붙인 듯한 이질적 레이어 조합

Image(gen) · Hybrid어울림: Asymmetric, Layered/Overlap, Paper Grain충돌: Clean Vector Line, Monoline

Cut-paper Illustration

컷페이퍼 일러스트 · Core

종이를 잘라 겹친 듯한 단순한 형태, 레이어, 그림자

SVG · Image(gen)어울림: Flat Fill, Layered/Overlap, Pastel충돌: Cross-hatching, Engraved Line

Flat Vector Illustration

플랫 벡터 일러스트 · Core

단순한 도형, 평면 색상, 명확한 윤곽의 벡터 기반 일러스트

SVG어울림: Clean Vector Line, Flat Fill, Limited Palette, Monoline충돌: Cross-hatching, Film Grain, Ink Bleed

Cyanotype

시아노타입 · Niche

프러시안 블루 실루엣. 감광지 + 자외선 노출

Image(gen)어울림: Monochrome, Paper Grain, Silhouette충돌: Chrome Material, Neon

Ukiyo-e

우키요에 · Support

일본 목판 다색 인쇄. 평탄한 색면, 굵은 외곽선, 보카시 기법

Image(gen)어울림: Flat Fill, Limited Palette, Outline Drawing충돌: Chrome Material, Glitch

Letterpress

레터프레스 · Niche

활자/판 눌러찍기. deboss 자국, 잉크 농도 변화

Image(gen)어울림: Debossed Surface, Limited Palette, Paper Grain충돌: Glass Material, Glow

대상의 구조와 작동 원리를 정확하게 설명하는 전문 도해형 일러스트입니다. 기술·과학 문서의 명료함을 목표로 합니다.

KeywordSampleVisual / PromptBuild · Pairing

Technical Illustration

테크니컬 일러스트 · Scaffold

대상의 구조, 부품, 작동 원리를 명확하게 설명하는 정밀한 설명형 일러스트

정밀한 선 · 콜아웃/라벨 · 구조 설명 · 기술 문서 같은 명료함"precise technical illustration with clean structural lines, callouts, and diagrammatic clarity"

SVG · Hybrid어울림: Annotation Diagram, Blueprint Line, Isometric, Monoline충돌: Ink Bleed, Watercolor

Scientific Illustration

과학 일러스트 · Scaffold

생물, 물질, 자연현상을 정확하고 분석적으로 묘사하는 재현 스타일

분석적 묘사 · 정확한 구조 · 관찰 기록 느낌"analytical scientific illustration with accurate structure and restrained detail"

Image(gen) · SVG어울림: Annotation Diagram, Cross-section View, Hairline, Limited Palette충돌: Glitch, Neon

Botanical Illustration

식물 세밀화 · Scaffold

식물의 잎, 줄기, 꽃, 뿌리를 정확하고 세밀하게 표현

식물 표본 느낌 · 섬세한 선 · 자연주의적 정밀함"refined botanical illustration with delicate specimen-like detail"

Image(gen) · SVG어울림: Detailed, Earth Tone, Hairline, Paper Grain충돌: Chrome Material, Glitch, Neon

Anatomical Illustration

해부학 일러스트 · Scaffold

인체나 생물의 내부 구조, 기관, 근육, 뼈를 분석적으로 표현

Image(gen) · SVG어울림: Annotation Diagram, Cross-section View, Cutaway View충돌: Glitch, Pixel Pattern

Medical Illustration

의학 일러스트 · Niche

질병, 수술, 생리 작용을 교육적으로 설명하는 전문 일러스트

Image(gen)어울림: Annotation Diagram, Cross-section View, Limited Palette충돌: Neon, Vaporwave

Cartographic Illustration

지도학적 일러스트 · Scaffold

지도, 지형, 경로, 위치 관계를 시각적으로 표현하는 지도 기반 스타일

SVG어울림: Limited Palette, Topographic Lines, Topographic View충돌: Clay Render, Glitch

벡터와 플랫처럼 디지털 도구로 그린 현대 일러스트 양식입니다. 화면과 인쇄 모두에 깔끔하게 적용됩니다.

KeywordSampleVisual / PromptBuild · Pairing

Vector Illustration

벡터 일러스트 · Core

수학적 곡선 기반. 선명한 외곽, 솔리드 채움, 무한 확대

SVG어울림: Clean Vector Line, Flat Fill, Limited Palette충돌: Film Grain, Ink Bleed

Flat Design

플랫 디자인 · Core

그라데이션/그림자 없이 순수 평면 색면과 기하 형태

SVG · CSS어울림: Flat Fill, Grid-Based, Limited Palette, Monoline충돌: Cross-hatching, Embossed Surface, Film Grain

Isometric Illustration

아이소메트릭 일러스트 · Core

30° 축측 투영. 원근 왜곡 없이 세 면 동일 비율

SVG · CSS · Three.js어울림: Clean Vector Line, Flat Fill, Isometric, Limited Palette충돌: Film Grain, Ink Bleed

Pixel Art

픽셀 아트 · Core

픽셀 단위 수작업. 8bit/16bit 제약, 디더링. 레트로 게임 미학

SVG · Canvas어울림: Dithered Shading, Grid-Based, Limited Palette, Pixel Pattern충돌: Blur, Gradient Shading, Watercolor

Concept Art

컨셉 아트 · Core

영화/게임 디지털 페인팅. 시네마틱 분위기

Image(gen)어울림: Full Bleed, High Contrast, Stylized

Editorial Illustration

에디토리얼 일러스트 · Core

아티클 삽화. 은유적, 중간 디테일 회화 터치

Image(gen) · SVG어울림: Asymmetric, Duotone, Grainy Gradient, Stylized

Children's Book Illustration

동화 일러스트 · Core

부드러운 형태, 따뜻한 팔레트, 둥근 캐릭터

Image(gen)어울림: Pastel, Soft Shading, Stylized충돌: Blueprint Line, Glitch, High Contrast

Sticker Art

스티커 아트 · Support

다이컷 흰색 테두리, 광택 채움. 스티커팩 미학

SVG어울림: Clean Vector Line, Flat Fill, Stylized충돌: Cross-hatching, Film Grain

Fashion Illustration

패션 일러스트 · Niche

늘씬한 비례, 제스처 중심, 의상 디테일 강조

Image(gen)어울림: Desaturated, Hand-drawn Line, Stylized

Geometric Illustration

기하학적 일러스트 · Support

기본 도형 조합. 모듈러, 추상적

SVG · CSS어울림: Flat Fill, Grid-Based, Limited Palette, Simplified충돌: Hand-drawn Line, Ink Bleed

Infographic

인포그래픽 · Core

아이콘 + 화살표 + 타이포 + 차트. 데이터/프로세스 시각 요약

SVG · Hybrid어울림: Flat Fill, Grid-Based, Limited Palette, Simplified충돌: Film Grain, Ink Bleed

Blueprint

블루프린트 · Support

흰색 선 + 청색 배경. 기술 도면 양식, 치수선과 주석

SVG어울림: Blueprint Grid Pattern, Blueprint Line, Monoline, Technical Line충돌: Pastel, Warm, Watercolor

Iconography

아이콘/픽토그램 · Core

단일 개념 단순화 기호. 유니버설 심볼, 최소 디테일 즉시 인지

SVG어울림: Clean Vector Line, Flat Fill, Monoline, Simplified충돌: Cross-hatching, Film Grain

애니메이션과 만화 특유의 셀 음영, 캐릭터 비례, 컷 양식입니다.

KeywordSampleVisual / PromptBuild · Pairing

Anime

애니메이션 · Core

일본 애니메이션 양식. 큰 눈, 셀 셰이딩, 표현적 라인워크

Image(gen)어울림: Cel Shading, Neon/Vivid, Outline Drawing

Manga

만화 · Core

흑백 일본 만화. 스크린톤 중간톤, 패널 그리드

Image(gen)어울림: Hatching, Monochrome, Outline Drawing, Screentone

Cel Shading

셀 셰이딩 · Core

경계 뚜렷한 2~3단계 평면 그림자. 3D에도 2D 느낌

Image(gen) · Three.js어울림: Flat Fill, Limited Palette, Outline Drawing충돌: Film Grain, Gradient Shading

90s Anime

90년대 애니메이션 · Support

VHS 시대 색감, 필름 그레인. 아키라/공각기동대 무드

Image(gen)어울림: Desaturated, Film Grain, Scanline

Pixar-style 3D

픽사 스타일 3D · Core

양식화 CGI. 서브서피스 스킨, 과장 비율

Image(gen)어울림: Pastel, Soft Shading, Stylized

Classic 2D Animation

클래식 2D 애니 · Support

유려한 선, 수채화 배경, 클래식 캐릭터 비율

Image(gen)어울림: Outline Drawing, Pastel, Watercolor

Western Cartoon

서양 카툰 · Support

굵은 외곽선, 과장된 표정, 원색 팔레트

Image(gen) · SVG어울림: Flat Fill, Neon/Vivid, Outline Drawing

Comic Book Art

코믹북 아트 · Core

굵은 잉크 외곽선 + 하프톤 음영 + 다이나믹 패널

Image(gen)어울림: Halftone Shading, High Contrast, Outline Drawing

입체로 렌더링한 듯한 3D 형상 표현 방식입니다. 점토, 와이어프레임, 로우폴리 등 렌더 룩으로 나뉩니다.

KeywordSampleVisual / PromptBuild · Pairing

3D Render

3D 렌더 · Core

범용 레이트레이싱 룩. 일반적 3D 광택/GI/그림자

Three.js · 3D · Image(gen)어울림: Glossy Finish, Matte Finish

Clay Render

클레이 렌더 · Core

점토처럼 부드럽고 매트한 표면, 둥근 형태, 친근한 입체감

부드러운 3D · 무광 표면 · 친근한 오브젝트"soft clay render with matte surfaces and friendly rounded forms"

Three.js · 3D · Image(gen)어울림: Matte Finish, Pastel, Soft Shading충돌: Blueprint Line, Cartographic Illustration, Cross-hatching

Wireframe Render

와이어프레임 렌더 · Core

3D 객체의 면과 꼭짓점 구조를 선으로만 표현

3D 골격 · 메시 구조 · 기술적 미래감"wireframe render showing mesh edges, vertices, and spatial structure"

Three.js · SVG · CSS어울림: Monochrome, Monoline, Wireframe Line충돌: Film Grain, Watercolor

Low-poly

로우폴리 · Core

적은 폴리곤으로 구성된 각진 면과 단순화된 형태

각진 면 · 단순화된 입체 · 레트로/게임 감성"low-poly 3D form with simplified angular facets and flat shading"

Three.js · 3D · Image(gen)어울림: Flat Fill, Limited Palette충돌: Engraved Line, Ink Bleed

Isometric Render

아이소메트릭 렌더 · Support

3D 등각 투영 렌더링. 게임, 인포그래픽에 활용

Three.js · SVG어울림: Flat Fill, Isometric, Limited Palette

Voxel

복셀 · Core

작은 정육면체 블록 단위로 형태를 구성하는 3D 픽셀 아트

Three.js · Image(gen)어울림: Grid-Based, Limited Palette충돌: Ink Bleed, Watercolor

Toon Render

툰 렌더 · Core

만화처럼 단순화된 명암, 강한 윤곽, 비현실적 색감의 3D

Three.js · Image(gen)어울림: Cel Shading, Limited Palette, Outline Drawing충돌: Film Grain

Ambient Occlusion Render

앰비언트 오클루전 렌더 · Support

접촉부와 구석의 그림자를 강조해 구조와 깊이를 드러냄

Three.js · 3D어울림: Matte Finish, Monochrome

Ray-traced Render

레이트레이스 렌더 · Support

빛의 반사, 굴절, 그림자를 물리적으로 계산한 사실적 렌더링

Three.js · 3D어울림: Glass Material, Glossy Finish, Metallic Material

Photoreal Render

포토리얼 렌더 · Scaffold

실제 사진처럼 보이는 재질, 빛, 카메라 표현

3D · Image(gen)어울림: Glossy Finish, Metallic Material

Claymation

클레이메이션 · Support

점토 인형 질감. 손가락 자국, 스톱모션 느낌

Image(gen)어울림: Matte Finish, Soft Light, Stylized충돌: Blueprint Line, Chrome Material

Origami / Papercraft

오리가미/페이퍼크래프트 · Support

접힌 종이 기하. 주름 그림자, 레이어 간격

Image(gen) · Three.js어울림: Layered/Overlap, Matte Finish, Pastel충돌: Chrome Material, Neon

유리, 금속, 세라믹처럼 3D 표면이 빛에 반응하는 재질 마감입니다.

KeywordSampleVisual / PromptBuild · Pairing

Matte Finish

매트 마감 · Support

빛 반사가 적고 부드러운 표면의 차분한 재질

Three.js · CSS · 3D어울림: Clay Render, Soft Shading

Glossy Finish

글로시 마감 · Support

반짝이는 표면 반사와 매끄러운 재질감

Three.js · CSS · 3D어울림: Ray-traced Render, Soft Light충돌: Matte Paper, Paper Grain

Glass Material

유리 재질 · Core

투명도, 굴절, 반사, 두께감을 가진 유리 재질

투명도 · 굴절 · 프리미엄 테크 느낌"transparent glass material with subtle refraction, thickness, and clean reflections"

Three.js · WebGL · CSS어울림: Blur, Glow, Refraction충돌: Cross-hatching, Etching, Ink Drawing

Frosted Glass Material

프로스티드 글래스 · Core

반투명하고 흐릿한 유리 표면, 부드러운 내부 확산감

Three.js · CSS · WebGL어울림: Blur, Glow, Soft Light충돌: Cross-hatching, Engraved Line

Chrome Material

크롬 재질 · Core

거울 같은 금속 반사와 차갑고 미래적인 표면감

거울 반사 · 미래적 금속감 · 차가운 고급감"polished chrome material with mirror-like reflection and futuristic finish"

Three.js · WebGL어울림: High Contrast, Ray-traced Render충돌: Botanical Illustration, Charcoal Drawing, Claymation

Metallic Material

금속 재질 · Core

금속의 반사, 거칠기, 무게감을 표현하는 재질

Three.js · WebGL · CSS어울림: Hard Light, Ray-traced Render충돌: Paper Grain, Watercolor

Ceramic Material

세라믹 재질 · Core

도자기처럼 매끄럽거나 은은한 광택이 있는 단단한 표면

Three.js · 3D어울림: Matte Finish, Soft Light

Plastic Material

플라스틱 재질 · Support

합성수지 같은 가벼운 반사, 부드러운 색면

Three.js · CSS어울림: Pastel, Soft Light

Translucent Material

반투명 재질 · Core

빛이 내부를 통과하는 듯한 깊이감과 반투명성

Three.js · WebGL · CSS어울림: Blur, Glow, Soft Light충돌: Cross-hatching, Engraved Line

Holographic Material

홀로그래픽 재질 · Core

무지갯빛 반사와 각도에 따른 색 변화가 나타나는 미래적 표면

Three.js · WebGL · CSS어울림: Chromatic Aberration, Glow, Neon/Vivid충돌: Etching, Paper Grain, Woodcut

Iridescent Material

이리데슨트 재질 · Core

조개껍질이나 오일막처럼 각도에 따라 색이 달라지는 표면

Three.js · WebGL어울림: Glow, Pastel충돌: Engraved Line, Woodcut

실제로 촬영한 사진처럼 보이는 카메라 기반 양식입니다. 스튜디오, 필름, 매크로 등 촬영 방식으로 나뉩니다.

KeywordSampleVisual / PromptBuild · Pairing

Studio Photography

스튜디오 포토 · Core

통제된 인공 조명, 심리스 배경, 선명. 제품 촬영

Image(gen)어울림: Centered, Matte, Realistic, Soft Light

Editorial Photography

에디토리얼 포토 · Support

매거진 스타일. 연출된 인물/라이프스타일

Image(gen)어울림: Desaturated, Rule of Thirds, Shallow Depth of Field

Documentary Photography

다큐멘터리 포토 · Niche

연출 없는 저널리즘. 현장광, 솔직한 포착

Image(gen)어울림: Deep Focus, Full Color, Realistic

Street Photography

스트릿 포토 · Support

도시 캔디드. 가용광, 움직임, 일상 순간

Image(gen)어울림: Full Color, High Contrast, Tight Crop

Fashion Photography

패션 포토 · Niche

하이키, 모델 중심, 의상 강조

Image(gen)어울림: Desaturated, Shallow Depth of Field, Soft Light

Food Photography

푸드 포토 · Support

탑다운/45°, 스타일링, 식욕 자극 조명

Image(gen)어울림: Bird's Eye View, Shallow Depth of Field, Soft Light

Macro Photography

매크로 포토 · Support

극접사. 매우 얕은 심도, 미세 디테일 확대

Image(gen)어울림: Macro View, Shallow Depth of Field, Soft Light

Landscape Photography

풍경 포토 · Core

넓은 풍경. 골든아워, 전경 앵커, 깊은 심도

Image(gen)어울림: Deep Focus, Full Bleed, Full Color, Golden Hour

Analog Film

아날로그 필름 · Core

필름 그레인, 따뜻한 색 캐스트, 바랜 색감. 35mm

Image(gen)어울림: Desaturated, Film Grain, Sepia/Warm Cast

Cinestill

시네스틸 · Support

시네마틱 그레인, 보케, 할레이션. 야간 필름 느낌

Image(gen)어울림: Bokeh, Film Grain, Neon Glow

Polaroid

폴라로이드 · Support

흰색 테두리, 바랜 색조, 정사각 크롭, 소프트 포커스

Image(gen)어울림: Desaturated, Sepia/Warm Cast, Soft Light

B&W Photography

흑백 사진 · Core

흑백 톤. 명암과 질감만으로 구성

Image(gen)어울림: Film Grain, High Contrast, Monochrome

Double Exposure

이중노출 · Support

두 이미지 겹쳐 투과. 실루엣 안 풍경 등 초현실

Image(gen)어울림: Layered/Overlap, Silhouette

Long Exposure

장노출 · Niche

장노출. 빛 궤적, 물 실크 표면, 움직임 흔적

Image(gen)어울림: Full Bleed, Soft Light

신스웨이브, Y2K처럼 특정 시대의 디지털 미감을 재현하는 양식입니다.

KeywordSampleVisual / PromptBuild · Pairing

Synthwave

신스웨이브 · Core

80년대 레트로퓨처리즘. 네온 그리드, 크롬 태양, 보라-핑크-시안

Image(gen) · CSS · WebGL어울림: Chrome Material, Neon Glow, Neon/Vivid, One-Point Perspective충돌: Paper Grain, Watercolor

Vaporwave

베이퍼웨이브 · Core

90년대 인터넷. 파스텔 핑크/틸, 글리치, Win95 UI

Image(gen) · CSS어울림: Chrome Material, Glitch, Pastel, Scanline충돌: Etching, Medical Illustration, Paper Grain

Cyberpunk

사이버펑크 · Core

네온 디스토피아. 비, 홀로그램, 고밀도 도시

Image(gen)어울림: High Contrast, Neon Glow, Neon/Vivid, One-Point Perspective충돌: Paper Grain, Pastel

Y2K Futurism

Y2K 퓨처리즘 · Support

반투명 크롬 블롭, 라임/실버, iMac G3 플라스틱

Image(gen) · CSS어울림: Chrome Material, Glossy Finish, Pastel충돌: Etching, Paper Grain

Frutiger Aero

프루티거 아에로 · Support

Vista/iOS6 스큐어모피즘. 광택 UI, 보케, 자연+기술

Image(gen) · CSS어울림: Bokeh, Glossy Finish, Soft Light충돌: Blueprint Line, Monochrome

Digital Brutalism

디지털 브루탈리즘 · Niche

콘크리트 텍스처, 로 타이포, 로파이 웹

CSS · Image(gen)어울림: Concrete Texture, High Contrast, Monochrome충돌: Pastel, Soft Light, Soft Shading

코드로 생성하는 추상 형상과 제너러티브 패턴입니다. 그라디언트, 파티클, 필드 계열이 대표적입니다.

KeywordSampleVisual / PromptBuild · Pairing

Mesh Gradient

메시 그라디언트 · Core

여러 색상 포인트가 유기적으로 섞이며 부드러운 색면 흐름

부드러운 색 흐름 · 현대적 배경 · 추상적 깊이"soft mesh gradient with organic color blending and subtle atmospheric depth"

CSS · Canvas · WebGL · Image(gen)어울림: Aurora Gradient, Glass Material, Glow, Grainy Gradient충돌: Blueprint Line, Etching, Woodcut

Aurora Gradient

오로라 그라디언트 · Core

오로라처럼 흐릿하고 빛나는 색 띠가 겹치는 추상 그래픽

CSS · Canvas · WebGL어울림: Blur, Glow, Mesh Gradient충돌: Cross-hatching, Engraved Line

Liquid Gradient

리퀴드 그라디언트 · Core

액체처럼 흐르는 색상 경계와 유동적인 색 변화

CSS · Canvas · WebGL어울림: Blob Shape, Glow충돌: Blueprint Line, Technical Line

Grainy Gradient

그레이니 그라디언트 · Core

그라디언트 위에 노이즈나 입자를 더해 질감과 깊이를 만듦

노이즈 입자 · 부드러운 색면 · 디지털 질감"grainy gradient with subtle noise texture over smooth color transitions"

CSS · SVG Filter · Canvas어울림: Limited Palette, Mesh Gradient, Noise Texture충돌: Chrome Material, Glossy Surface

Blob Shape

블롭 형태 · Core

둥글고 불규칙한 유기적 덩어리 형태

CSS · SVG · Canvas어울림: Gradient Shading, Pastel, Soft Shading충돌: Blueprint Line, Technical Line

Metaball

메타볼 · Core

여러 유기적 덩어리가 서로 합쳐지는 듯한 액체형 추상 구조

Canvas · WebGL · Three.js어울림: Blob Shape, Glow충돌: Cross-hatching, Engraved Line

Membrane Form

멤브레인 형태 · Support

얇은 막이나 표면이 늘어나고 휘어진 듯한 유기적 구조

WebGL · Three.js어울림: Glow, Translucent Material

Particle Field

파티클 필드 · Core

많은 입자가 공간에 분포해 흐름, 에너지, 데이터를 표현

입자 분포 · 데이터/에너지 느낌 · 동적 배경"subtle particle field suggesting data, energy, and distributed intelligence"

Canvas · WebGL · Three.js어울림: Glow, Neon/Vivid, Point Cloud충돌: Etching, Paper Grain

Point Cloud

포인트 클라우드 · Core

점들의 집합으로 형태, 공간, 데이터 구조를 표현

Canvas · WebGL · Three.js어울림: Monochrome, Particle Field

Vector Field

벡터 필드 · Core

방향과 힘을 가진 선이나 화살표 흐름으로 보이지 않는 장을 표현

Canvas · SVG어울림: Flow Field, Monoline

Flow Field

플로우 필드 · Core

알고리즘적 흐름을 따라 선이나 입자가 이동하는 생성형 그래픽

유동적 선 흐름 · 알고리즘 감각 · 동적 패턴"algorithmic flow field with lines or particles following invisible vector forces"

Canvas · WebGL어울림: Monoline, Procedural Lines, Vector Field

Waveform

웨이브폼 · Core

파동, 소리, 신호, 에너지의 흐름을 선형 또는 추상 곡선으로 표현

SVG · Canvas · CSS어울림: Glow, Limited Palette, Monoline

Orbital System

궤도 시스템 · Core

중심과 주변 궤도, 회전 관계를 이용해 시스템을 표현

SVG · Canvas · CSS어울림: Glow, Monoline, Radial

Radial System

방사형 시스템 · Core

중심에서 바깥으로 퍼지는 원형 또는 방사형 구조

SVG · Canvas어울림: Monoline, Radial

Spiral System

나선형 시스템 · Core

성장, 반복, 순환, 복잡성을 나선 형태로 표현

SVG · Canvas어울림: Limited Palette, Monoline

Topographic Lines

지형 등고선 · Core

선의 간격과 형태로 높낮이, 흐름, 표면 구조를 표현

등고선 · 지형적 흐름 · 데이터 표면"topographic contour lines forming an abstract data landscape"

SVG · Canvas어울림: Limited Palette, Monoline, Topographic Pattern

Voronoi Cells

보로노이 셀 · Core

점 사이의 거리 관계로 분할된 세포형 패턴

Canvas · SVG · WebGL어울림: Limited Palette, Monoline

Crystalline Structure

결정 구조 · Core

결정처럼 각진 면, 반복적 격자, 기하학적 성장 패턴

Three.js · SVG어울림: Glass Material, Metallic Material

Fractal Form

프랙탈 형태 · Core

작은 구조가 반복되어 큰 구조를 이루는 자기유사적 패턴

Canvas · WebGL어울림: Limited Palette, Monoline

Parametric Surface

파라메트릭 표면 · Core

수학적 파라미터로 생성된 곡면, 격자, 유동적 표면

Three.js · WebGL어울림: Glass Material, Glow, Metallic Material

Procedural Lines

절차적 선 · Support

알고리즘 규칙에 따라 생성된 반복적이거나 유기적인 선

Canvas · SVG어울림: Flow Field, Monoline

Part 2

구조

어떤 시점과 배치로 보여주는가: 56개 키워드

대상을 어떤 시점과 투영으로 보여줄지 정하는 공간 표현입니다. 아이소메트릭, 정투영, 단면 등이 포함됩니다.

KeywordSampleVisual / PromptBuild · Pairing

Isometric

아이소메트릭 · Core

세 축이 동일한 비율로 보이는 등각 투영

입체 구조 · 원근 왜곡 적음 · 시스템 설명에 적합"isometric projection showing structured layers without dramatic perspective distortion"

SVG · Three.js · CSS어울림: Flat Fill, Isometric Illustration, Technical Line

Axonometric

축측 투영 · Scaffold

원근감 없이 여러 축을 기준으로 입체를 보여주는 투영 상위 범주

SVG어울림: Isometric, Technical Line

Orthographic

정투영 · Core

대상의 한 면을 왜곡 없이 평면적으로 보여주는 기술 제도식 투영

도면식 정면 · 치수 정확성 · 차분한 구조"orthographic technical view with no perspective distortion"

SVG어울림: Blueprint Line, Measurement Diagram, Technical Line

Oblique Projection

사투영 · Support

정면 비율을 유지하고 깊이 축을 비스듬히 표현하는 투영

SVG어울림: Technical Line

Eye Level

아이 레벨 · Core

시선 높이 정면 앵글. 친근하고 자연스러운 기본값

Image(gen)어울림: Centered, Realistic, Soft Light

Bird's Eye View

조감/탑다운 · Core

직하방/고각 시점. 전체 구조/패턴. 음식 촬영 포함

Image(gen) · SVG어울림: Centered, Grid-Based

Worm's Eye View

극저각 · Support

극저각 올려보기. 위압감, 장대함, 건축 스케일

Image(gen)어울림: Full Bleed, Hard Light

Aerial/Drone

항공/드론 · Support

항공 촬영 시점. 도시/자연 패턴, 넓은 스케일

Image(gen)어울림: Deep Focus, Full Bleed

Over-the-Shoulder

어깨 너머 · Support

어깨 너머 시점. 맥락 속 피사체, 앱 사용 장면

Image(gen)어울림: Shallow Depth of Field

One-Point Perspective

1점 투시 · Support

단일 소실점. 터널, 복도의 깊이감과 집중 유도

Image(gen)어울림: Full Bleed, High Contrast

Flat (2D)

2D 평면 · Core

깊이감 없는 완전 평면. 아이콘, 패턴, UI 요소 기본

SVG · CSS어울림: Flat Fill, Grid-Based, Monoline

Plan View

평면도 · Core

대상을 위에서 내려다본 도면식 시점

SVG어울림: Blueprint Line, Technical Line

Elevation View

입면도 · Support

대상의 정면이나 측면을 수직 투영으로 보여주는 도면식 표현

SVG어울림: Orthographic, Technical Line

Top-down View

탑다운 뷰 · Core

대상을 수직으로 내려다보는 시점. 지도, 데이터 맵에 적합

SVG · Canvas어울림: Bird's Eye View, Grid-Based

Cutaway View

컷어웨이 뷰 · Core

대상의 일부를 잘라내 내부 구조를 동시에 보여주는 설명형 시각화

내부 구조 노출 · 설명형 절단면 · 교육적 명료함"cutaway view revealing internal layers and hidden structure"

SVG · Hybrid어울림: Annotation Diagram, Cross-section View, Technical Illustration

Cross-section View

단면도 · Core

대상을 특정 평면으로 절단해 내부 단면 구조를 보여주는 표현

SVG어울림: Cutaway View, Hatching, Technical Illustration

Exploded View

분해도 · Core

부품을 분리해 띄워놓음으로써 조립 구조와 관계를 보여줌

분리된 부품 · 조립 구조 · 제품 내부 로직"exploded view with separated components and clear assembly relationships"

SVG · Three.js어울림: Annotation Diagram, Isometric, Technical Illustration

X-ray View

엑스레이 뷰 · Core

외부를 투과해 내부 구조가 보이는 것처럼 표현

SVG어울림: Monochrome, Transparent View, Wireframe Line

Transparent View

투명 뷰 · Core

외피나 표면을 반투명하게 처리해 내부 레이어를 드러냄

겹쳐 보이는 내부 · 반투명 레이어 · 시스템 투시"transparent layered view revealing internal systems through translucent surfaces"

SVG · CSS · Three.js어울림: Frosted Glass Material, X-ray View

Macro View

매크로 뷰 · Support

대상을 매우 가까이 확대해 질감, 구조, 세부 형태를 강조

Image(gen)어울림: Detailed, Shallow Depth of Field

Microscopic View

현미경 뷰 · Support

미세 구조, 세포, 입자, 재료 패턴을 현미경처럼 확대

Image(gen) · Canvas어울림: Point Cloud, Voronoi Cells

Topographic View

지형도식 뷰 · Core

등고선과 고도 정보를 중심으로 지형이나 표면 구조를 표현

SVG · Canvas어울림: Monoline, Topographic Lines, Topographic Pattern

Shallow Depth of Field

얕은 심도 · Core

피사체 선명 + 배경 블러(보케). 주제 분리

Image(gen)어울림: Bokeh, Soft Light

Deep Focus

딥 포커스 · Support

전경~배경 모두 선명. 정보 전달 목적

Image(gen)어울림: Crisp/Clean, Landscape Photography

Tilt-Shift

틸트시프트 · Niche

선택적 블러 미니어처 효과

Image(gen)어울림: Bird's Eye View, Blur

구조와 관계를 설명하기 위한 도식·다이어그램 형식입니다. 시스템, 플로우, 네트워크 등을 시각화합니다.

KeywordSampleVisual / PromptBuild · Pairing

Schematic Diagram

스키매틱 다이어그램 · Core

구성 요소와 관계를 단순화해 보여주는 구조 중심 다이어그램

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

Technical Diagram

테크니컬 다이어그램 · Scaffold

기술적 대상의 구조와 원리를 설명하는 넓은 범주의 다이어그램

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

Blueprint Diagram

블루프린트 다이어그램 · Core

청사진처럼 치수선, 보조선, 설계선으로 구성된 설계도형 다이어그램

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

System Diagram

시스템 다이어그램 · Scaffold

여러 구성 요소와 상호작용을 하나의 시스템으로 보여주는 관계 그래픽

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

Process Diagram

프로세스 다이어그램 · Core

단계, 순서, 절차를 시각적으로 정리한 다이어그램

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

Flow Diagram

플로우 다이어그램 · Core

입력, 처리, 출력, 분기 등 흐름의 방향성을 표현

방향성 · 절차 · 입출력 흐름"clear flow diagram showing input, process, output, and directional movement"

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

Network Diagram

네트워크 다이어그램 · Core

노드와 연결선으로 관계망, 연결 구조를 표현

노드와 선 · 관계망 · 연결 구조"network diagram with sparse nodes, clean connection lines, and readable clusters"

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

Node-link Diagram

노드-링크 다이어그램 · Core

점과 선을 이용해 개체와 관계를 추상적으로 표현

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

Circuit Diagram

회로 다이어그램 · Core

전기 회로나 논리 구조를 기호와 연결선으로 표현

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

Architecture Diagram

아키텍처 다이어그램 · Core

소프트웨어, 서비스, 인프라 구성 요소의 구조를 보여줌

시스템 구성 · 모듈 관계 · 기술 제품 설명"clean software architecture diagram with modular blocks and clear connection logic"

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

Pipeline Diagram

파이프라인 다이어그램 · Core

데이터, 작업, 생산 과정이 단계적으로 이동하는 구조

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

Stack Diagram

스택 다이어그램 · Core

여러 계층이나 레이어가 쌓인 구조를 표현

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

Layer Diagram

레이어 다이어그램 · Core

시스템, 정보, 시각 요소의 층위를 분리해 보여줌

층위 구조 · 스택 · 시스템 분해"layer diagram separating system levels into clear stacked visual hierarchy"

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

Component Diagram

컴포넌트 다이어그램 · Core

부품, 모듈, 구성 요소의 관계와 역할을 보여줌

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

Annotation Diagram

주석 다이어그램 · Core

대상 주변에 라벨, 선, 설명을 붙여 세부 정보를 설명

콜아웃 · 라벨 · 설명선"annotation diagram with precise callout lines and minimal explanatory labels"

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

Measurement Diagram

측정 다이어그램 · Core

치수선, 각도, 스케일, 비율을 강조해 구조를 설명

치수선 · 각도 표시 · 스펙시트 느낌"measurement diagram with dimension lines, angle marks, and scale indicators"

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

Spec Sheet Illustration

스펙시트 일러스트 · Core

제품이나 시스템의 사양을 도면과 라벨로 정리한 설명형 그래픽

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

Taxonomy Map

택소노미 맵 · Support

개념, 카테고리, 키워드의 분류 구조를 시각적으로 보여줌

분류 구조 · 계층 · 개념 지도"taxonomy map showing hierarchical categories with clean branches and readable structure"

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

Constellation Diagram

별자리형 다이어그램 · Core

분산된 노드가 별자리처럼 연결되어 관계와 군집을 표현

SVG · Hybrid어울림: Limited Palette, Monoline, Technical Line

화면 안에서 요소를 배치하고 잘라내는 구도 규칙입니다.

KeywordSampleVisual / PromptBuild · Pairing

Centered

중앙 배치 · Core

피사체 프레임 정중앙. 안정감, 대칭, 포멀

Rule of Thirds

3분할 법칙 · Core

3분할 교차점 배치. 자연스러운 시선 흐름

Asymmetric

비대칭 · Support

의도적 비대칭. 긴장감, 동적, 현대적

Diagonal

대각선 배치 · Support

대각선 축 배치. 움직임, 에너지, 역동성

Radial

방사형 배치 · Niche

중심에서 방사형. 집중, 폭발, 만다라

Negative Space

여백 · Core

의도적 빈 공간. 여백이 메시지

Tight Crop

타이트 크롭 · Support

프레임까지 꽉 참. 밀도감, 임팩트

Full Bleed

풀 블리드 · Core

여백 없이 가장자리까지 확장. 몰입감

Frame-in-Frame

프레임 인 프레임 · Support

프레임 안의 프레임. 창문, 아치로 깊이와 맥락 부여

Seamless Pattern

심리스 패턴 · Core

이음새 없이 반복 타일. 배경, 텍스타일, 브랜드 패턴

Grid-Based

그리드 기반 · Core

균등 격자 안에 요소 배치. 질서, 체계

Layered/Overlap

레이어드/겹침 · Support

요소 겹쳐 쌓인 구성. 깊이감, 콜라주적 풍부함

Part 3

표면

선·음영·색·질감·효과를 어떻게 처리하는가: 118개 키워드

선의 굵기, 질감, 성격을 정하는 선 처리 방식입니다.

KeywordSampleVisual / PromptBuild · Pairing

Monoline

모노라인 · Core

모든 선이 동일한 굵기로 유지되는 균일하고 정돈된 선

균일한 선 굵기 · 정돈된 구조 · 미니멀한 인상"clean monoline strokes with consistent stroke width and refined spacing"

SVG · CSS충돌: Collage Illustration

Hairline

헤어라인 · Core

매우 가늘고 섬세한 선으로 정밀하고 고급스러운 인상

아주 얇은 선 · 섬세한 고급감 · 정밀한 구조"ultra-fine hairline strokes, refined precision, generous negative space"

SVG

Outline Drawing

아웃라인 드로잉 · Core

대상의 외곽선을 중심으로 형태를 정의하는 선 기반 표현

SVG

Contour Line

컨투어 라인 · Core

대상의 외곽이나 형태 흐름을 따라 구조와 부피를 암시하는 선

SVG

Continuous Line

연속선 드로잉 · Support

선을 거의 끊지 않고 하나의 흐름으로 대상을 그림

SVG

Clean Vector Line

클린 벡터 라인 · Core

벡터 기반의 매끄럽고 정제된 선. 디지털 그래픽에 적합

매끄러운 곡선 · 정제된 디지털 인상 · 확장 가능한 벡터 느낌"smooth clean vector linework with polished digital edges"

SVG충돌: Charcoal Drawing, Collage Illustration

Hand-drawn Line

핸드드로잉 라인 · Support

손으로 그린 듯한 불균일한 흔들림과 자연스러운 필압

SVG · Image(gen)충돌: Geometric Illustration

Rough Ink Line

거친 잉크 라인 · Support

잉크의 번짐, 끊김, 거친 가장자리가 드러나는 질감 있는 선

SVG · Image(gen)

Technical Line

테크니컬 라인 · Core

제도, 설계, 측정에 적합한 정밀하고 기능적인 선

제도선 · 측정선 · 설계도 느낌"functional technical linework with precise guides and measurement logic"

SVG충돌: Blob Shape, Liquid Gradient

Blueprint Line

블루프린트 라인 · Core

청사진이나 설계도처럼 얇고 정밀한 보조선, 치수선 느낌

청사진 느낌 · 보조선 · 기술적 차가움"blueprint-like thin guide lines, dimension marks, and precise construction details"

SVG · CSS충돌: Blob Shape, Children's Book Illustration, Clay Render

Engraved Line

인그레이빙 라인 · Core

판에 새긴 듯한 날카롭고 반복적인 선으로 음영과 장식성을 만듦

SVG충돌: Aurora Gradient, Clay Render, Cut-paper Illustration

Wireframe Line

와이어프레임 라인 · Core

3D 구조의 골격이나 면의 경계를 선만으로 표현

SVG · Three.js

Dashed Line

파선 · Support

끊어진 선을 사용해 경로, 숨은 구조, 보조 관계를 표현

SVG · CSS

Dotted Line

도트 라인 · Support

작은 점들의 연속으로 선을 구성해 연결감이나 보조 정보를 표현

SVG · CSS

명암과 음영을 만드는 톤 처리 방식입니다. 해칭, 하프톤, 그라디언트 등이 있습니다.

KeywordSampleVisual / PromptBuild · Pairing

Hatching

해칭 · Core

평행선을 반복해 명암과 밀도를 표현하는 음영 기법

선 밀도 명암 · 고전적 음영 · 세밀한 깊이"subtle hatching lines to build tone and engraved depth"

Cross-hatching

크로스해칭 · Core

서로 교차하는 선을 겹쳐 깊은 음영과 질감을 만듦

깊은 음영 · 판화적 밀도 · 고전적 텍스처"dense cross-hatching with refined engraved tonal depth"

충돌: Aurora Gradient, Clay Render, Cut-paper Illustration

Stippling

스티플링 · Core

작은 점들의 밀도 차이로 명암과 질감을 만드는 점묘 기반 음영

Halftone Shading

하프톤 음영 · Core

인쇄 망점처럼 점의 크기나 간격으로 톤을 분해해 표현

망점 톤 · 인쇄물 감성 · 레트로 팝"halftone dot shading with print-inspired tonal breakdown"

Screentone

스크린톤 · Support

만화나 인쇄물에서 쓰이는 반복 점, 선, 패턴 톤

Dithered Shading

디더링 음영 · Core

제한된 색상이나 픽셀 패턴으로 중간 톤을 만듦

Ink Wash Shading

잉크 워시 음영 · Support

묽은 잉크의 농담, 번짐, 층을 이용해 부드러운 명암

Gradient Shading

그라디언트 음영 · Support

색상이나 명도가 부드럽게 변하는 그라디언트로 입체감 표현

충돌: Cel Shading, Pixel Art, Screenprint

Flat Fill

플랫 필 · Core

음영 없이 단일 색면으로 형태를 채우는 간결한 표현

단순 색면 · 명확한 형태 · 가벼운 UI 친화성"flat color fills with simple geometric clarity and no complex shading"

Soft Shading

소프트 셰이딩 · Support

부드러운 명암 변화와 낮은 경계감으로 입체감을 만듦

충돌: Digital Brutalism

Contour Shading

컨투어 음영 · Support

형태의 굴곡을 따라가는 선이나 톤으로 구조를 표현

Chiaroscuro

키아로스쿠로 · Niche

강한 명암 대비로 극적인 깊이와 입체감을 만드는 고전적 음영

색을 제한하고 조정하는 색 운용 규칙입니다. 모노크롬, 듀오톤, 제한 팔레트 등으로 결과의 톤을 좌우합니다.

KeywordSampleVisual / PromptBuild · Pairing

Monochrome

모노크롬 · Core

단일 색상 명도 변화만으로 구성. 흑백 포함

절제된 색 · 고급감 · 형태 중심"monochrome palette using one ink color and tonal variation only"

충돌: Frutiger Aero

Duotone

듀오톤 · Core

2색으로 하이라이트/섀도우 분리. 모던하고 강렬

두 색 대비 · 모던한 임팩트 · 브랜드 컬러 통일"controlled duotone color treatment with strong yet minimal contrast"

Tritone

트리톤 · Support

3색 톤 구성. Duotone보다 풍부하면서 제한적

Limited Palette

제한 팔레트 · Core

의도적 3~5색. 절제, 브랜드 일관성

브랜드 일관성 · 절제된 조합 · 시스템화된 색"limited palette with restrained brand colors and clear hierarchy"

Full Color

풀 컬러 · Core

제한 없는 자연 풀컬러. 사진/리얼리스틱 기본값

Halftone

하프톤 처리 · Core

인쇄 도트 패턴으로 톤 시뮬레이션. 코믹/레트로/팝아트

Gradient Map

그라디언트 맵 · Support

명도값에 색상 매핑. 브랜드 컬러 통일 기법

Desaturated

디새추레이티드 · Support

채도 낮춘 처리. 차분하고 절제된 인상

Inverted/Negative

반전/네거티브 · Niche

색상 반전. 어두운 배경 + 밝은 피사체. 실험적

Spot Color

별색 강조 · Support

모노 위에 한 색만 강조. 시선 유도, 드라마틱

시선 유도 · 강조점 · 단정한 임팩트"mostly monochrome composition with a single restrained spot color accent"

Color Grading

컬러 그레이딩 · Core

영화적 색보정. 틸/오렌지, 쿨/웜 시프트 톤 통일

Pastel

파스텔 · Core

높은 명도 + 낮은 채도. 부드럽고 친근

충돌: Blueprint, Cyberpunk, Digital Brutalism

Neon/Vivid

네온/비비드 · Core

극도로 높은 채도. 에너지, 나이트라이프, 게이밍

Earth Tone

어스 톤 · Support

갈색, 올리브, 테라코타. 자연, 오가닉, 크래프트

Muted

뮤티드 · Support

중간 채도. 탁하지만 세련. 스칸디나비안, 미니멀

High Contrast

고대비 · Support

밝은/어두운 영역 극단 대비. 강렬, 드라마틱

충돌: Children's Book Illustration

Sepia/Warm Cast

세피아/웜 캐스트 · Support

갈색-황금 색조. 빈티지, 노스탤지어

종이결, 필름 그레인, 노이즈처럼 표면에 얹는 질감 오버레이입니다.

KeywordSampleVisual / PromptBuild · Pairing

Paper Grain

종이 그레인 · Core

종이 섬유와 미세한 표면 입자가 보이는 자연스러운 종이 질감

종이 섬유 · 아날로그 감성 · 따뜻한 표면"subtle paper grain texture with tactile editorial warmth"

SVG Filter · CSS · Image(gen)충돌: Chrome Material, Cyberpunk, Glass Material

Archival Paper Texture

아카이브 종이 질감 · Core

오래된 문서, 박물관 자료처럼 고전적인 종이 표면감

Image(gen)

Blueprint Paper Texture

블루프린트 종이 질감 · Core

청사진 종이처럼 기술적이고 차가운 표면 질감

CSS · Image(gen)

Newsprint Texture

신문지 질감 · Support

얇은 종이, 잉크 번짐, 낮은 인쇄 품질의 신문 인쇄 질감

Image(gen)

Risograph Grain

리소그래프 그레인 · Core

리소 인쇄 특유의 거친 입자, 색 번짐, 어긋난 인쇄 질감

Image(gen) · SVG Filter

Screenprint Texture

실크스크린 질감 · Core

색면이 층으로 찍힌 듯한 가장자리, 잉크 두께, 수작업 인쇄감

Image(gen)

Halftone Texture

하프톤 질감 · Core

인쇄 망점이 표면 전체에 드러나는 점 기반 텍스처

SVG Filter · CSS

Noise Texture

노이즈 텍스처 · Core

무작위 입자나 픽셀을 더해 디지털 표면의 밋밋함을 줄이는 질감

SVG Filter · CSS · Canvas

Film Grain

필름 그레인 · Core

아날로그 필름처럼 미세한 입자와 불균일한 표면감

CSS · SVG Filter · Image(gen)충돌: Cel Shading, Flat Design, Flat Vector Illustration

Digital Noise

디지털 노이즈 · Support

디지털 랜덤 픽셀 노이즈. 균일하고 차가움

CSS · SVG Filter

Grain Gradient

그레인 그라디언트 · Core

그라데이션에 미세 입자. 플랫에 깊이감 추가

CSS · SVG Filter

Distressed/Grunge

디스트레스드/그런지 · Support

긁힘, 얼룩, 마모 흔적. 거칠고 날것

Image(gen)

Ink Bleed

잉크 번짐 · Core

잉크가 종이에 스며들며 가장자리가 퍼지는 듯한 표현

Image(gen) · SVG Filter충돌: Chrome Material, Flat Vector Illustration, Geometric Illustration

Ink Smudge

잉크 얼룩 · Support

손이나 도구에 의해 잉크가 문질러진 듯한 얼룩

Image(gen)

Embossed Surface

엠보싱 표면 · Support

표면이 위로 돌출된 듯한 입체적 압각 질감

CSS · SVG Filter충돌: Flat Design

Debossed Surface

디보싱 표면 · Support

표면이 안쪽으로 눌린 듯한 음각 질감

CSS · SVG Filter

Matte Paper

매트 종이 · Core

빛 반사가 적고 부드러운 촉감의 무광 종이 표면

CSS충돌: Glossy Finish

Glossy Surface

글로시 표면 · Support

빛을 강하게 반사하는 매끄럽고 광택 있는 표면

CSS충돌: Gouache, Grainy Gradient, Pencil Sketch

Misregistration

미스레지스트레이션 · Support

색판 어긋남. 리소/스크린프린트 불완전 정합

Image(gen) · CSS

Brushed Metal

브러시드 메탈 · Support

금속 표면을 한 방향으로 문지른 듯한 미세한 선형 질감

CSS · Image(gen)

Acrylic Surface

아크릴 표면 · Support

투명하거나 반투명한 플라스틱 계열의 매끄럽고 가벼운 표면

CSS

Marble Texture

대리석 질감 · Support

자연석의 불규칙한 결, 고급스러운 색 흐름, 단단한 표면감

Image(gen) · CSS

Concrete Texture

콘크리트 질감 · Support

거칠고 미세한 입자, 무채색의 산업적 표면감

Image(gen) · CSS

Fabric Texture

패브릭 질감 · Support

직물의 짜임, 섬유, 부드러운 표면

Image(gen)

Holographic Foil

홀로그래픽 포일 · Core

각도에 따라 무지갯빛이 변하는 얇은 금속박 같은 표면 효과

CSS · WebGL

Pearlescent Surface

진주광 표면 · Core

진주처럼 부드럽고 다층적인 색 반사가 나타나는 표면

CSS · WebGL

반복 패턴과 장식 요소입니다. 배경이나 테두리에 리듬을 부여합니다.

KeywordSampleVisual / PromptBuild · Pairing

Halftone Pattern

하프톤 패턴 · Core

인쇄 망점처럼 점의 크기와 간격을 반복해 톤과 장식성을 만듦

반복 망점 · 인쇄감 · 레트로 질감"halftone pattern with controlled dot scale and print-like texture"

SVG · CSS · SVG Filter

Dot Pattern

도트 패턴 · Core

점을 반복적으로 배열해 리듬, 질감, 배경 장식을 만듦

SVG · CSS · SVG Filter

Line Pattern

라인 패턴 · Core

선을 반복해 방향성, 밀도, 표면 질감을 만듦

SVG · CSS · SVG Filter

Checker Pattern

체커 패턴 · Support

격자형 사각 패턴으로 대비와 리듬감을 만듦

SVG · CSS · SVG Filter

Grid Pattern

그리드 패턴 · Core

그래픽 배경이나 표면 장식으로 쓰이는 격자 패턴

SVG · CSS · SVG Filter

Blueprint Grid Pattern

블루프린트 그리드 패턴 · Core

설계도 배경처럼 정밀한 격자와 보조선을 가진 기술적 패턴

설계도 배경 · 정밀 격자 · 보조선"subtle blueprint grid pattern with fine construction guides"

SVG · CSS · SVG Filter

Wave Pattern

웨이브 패턴 · Core

반복되는 파형 선이나 면으로 흐름과 유동성을 표현

SVG · CSS · SVG Filter

Topographic Pattern

지형도 패턴 · Core

등고선이 반복되어 지형, 데이터, 표면의 흐름을 암시

SVG · CSS · SVG Filter

Hatch Pattern

해치 패턴 · Core

평행선 또는 교차선을 반복해 밀도와 음영감을 만듦

SVG · CSS · SVG Filter

Circuit Pattern

회로 패턴 · Core

회로 기판처럼 선과 노드가 반복되는 기술적 장식 패턴

SVG · CSS · SVG Filter

Pixel Pattern

픽셀 패턴 · Core

작은 사각 픽셀 단위가 반복되어 디지털 질감이나 레트로 감성을 만듦

SVG · CSS · SVG Filter충돌: Anatomical Illustration

Guilloche Pattern

기요셰 패턴 · Core

지폐나 보안 인쇄물처럼 정교한 곡선이 반복되는 장식 패턴

SVG · CSS · SVG Filter

Moiré Pattern

무아레 패턴 · Core

두 패턴이 겹치며 생기는 간섭 무늬로 광학적 긴장감을 만듦

SVG · CSS · SVG Filter

Ornamental Border

장식 테두리 · Niche

이미지나 영역의 가장자리를 장식하는 반복적 프레임 그래픽

SVG · CSS · SVG Filter

Corner Ornament

코너 장식 · Niche

프레임이나 박스의 모서리에 배치되는 장식 그래픽 요소

SVG · CSS · SVG Filter

Divider Ornament

디바이더 장식 · Niche

콘텐츠나 영역 사이를 나누는 장식적 구분선 그래픽

SVG · CSS · SVG Filter

글로우, 글리치, 굴절처럼 빛과 렌즈를 흉내 내는 후처리 효과입니다.

KeywordSampleVisual / PromptBuild · Pairing

Glow

글로우 · Core

빛이 주변으로 퍼지는 듯한 발광 효과

발광 · 미래감 · 시선 집중"subtle controlled glow used as a precise highlight, not excessive decoration"

CSS · SVG Filter · Canvas충돌: Engraving, Ink Drawing, Letterpress

Bloom

블룸 · Support

강한 빛이 화면에서 번져 밝은 영역이 부드럽게 확산

CSS · Canvas · WebGL

Blur

블러 · Support

형태를 흐리게 만들어 깊이감, 속도감, 비초점 효과

부드러운 깊이 · 비초점 · 층 분리"soft blur for atmospheric separation and subtle depth"

CSS · SVG Filter충돌: Engraving, Pixel Art, Screenprint

Lens Flare

렌즈 플레어 · Niche

카메라 렌즈에 강한 빛이 들어올 때 생기는 빛 번짐

Canvas · Image(gen)

Chromatic Aberration

색수차 · Core

RGB 색상이 살짝 어긋나며 렌즈 왜곡이나 디지털 감각을 만듦

CSS · SVG Filter · Canvas

RGB Split

RGB 분리 · Core

빨강, 초록, 파랑 채널을 분리해 글리치나 전자적 왜곡

CSS · Canvas

Scanline

스캔라인 · Core

CRT나 오래된 디스플레이처럼 수평선이 반복되는 화면 질감

CSS · SVG Filter

Glitch

글리치 · Core

디지털 오류, 깨짐, 왜곡, 노이즈를 의도적으로 표현

디지털 오류 · 깨짐 · 긴장감"controlled glitch distortion with digital artifacts, used sparingly"

CSS · Canvas · SVG Filter충돌: Anatomical Illustration, Botanical Illustration, Cartographic Illustration

Liquid Distortion

리퀴드 왜곡 · Core

이미지가 액체 표면을 통과한 듯 휘어지고 흐르는 효과

WebGL · Canvas · SVG Filter

Noise Displacement

노이즈 디스플레이스먼트 · Core

무작위 노이즈 값을 이용해 이미지나 선을 변형시키는 왜곡

WebGL · Canvas · SVG Filter

Refraction

굴절 · Core

빛이 유리나 액체를 통과하며 뒤의 이미지가 휘어져 보이는 효과

빛의 휘어짐 · 프리미엄 깊이 · 유리/액체 감각"subtle refraction through glass or liquid, creating premium optical depth"

WebGL · Three.js충돌: Risograph

Caustics

카스틱스 · Niche

물이나 유리 표면을 통과한 빛이 밝은 곡선 패턴으로 맺히는 광학 효과

WebGL · Three.js

대상을 얼마나 사실적으로 또는 추상적으로 다룰지 정하는 추상화 정도입니다.

KeywordSampleVisual / PromptBuild · Pairing

Realistic

사실적 · Core

현실 그대로. 디테일, 질감, 비례 모두 실물

Stylized

양식화 · Core

현실 기반 과장/단순화. 캐릭터 일러스트, 마스코트

Simplified

단순화 · Core

핵심 형태만 남김. 아이콘, 인포그래픽 요소

Geometric/Abstract

기하/추상 · Core

기하 형태로 환원. 원, 삼각형, 사각형 조합

Silhouette

실루엣 · Core

외곽만 남긴 단색 형태. 최대 단순화

Outline/Stroke-only

외곽선만 · Support

외곽선만으로 형태. 내부 빈 상태

Detailed

정교한/장식적 · Support

장식적 디테일 풍부. 패턴, 문양

Chibi

치비/SD · Support

과장 비율 (머리:몸 1:1~2). 극단적 귀여움

빛과 환경 요소로 최종 분위기를 만드는 처리입니다. 소프트 라이트, 골든 아워, 네온 글로우 등이 있습니다.

KeywordSampleVisual / PromptBuild · Pairing

Soft Light

소프트 라이트 · Core

부드럽고 확산된 광원. 그림자 옅음. 편안한 인상

충돌: Digital Brutalism

Hard Light

하드 라이트 · Support

강한 직사광. 선명한 그림자. 드라마틱

Backlit/Rim Light

백라이트/림 라이트 · Support

피사체 뒤 광원. 실루엣 가장자리 빛남. 극적 분리

Golden Hour

골든아워 · Core

일출/일몰 따뜻한 황금빛. 가장 따뜻한 자연광

Blue Hour

블루아워 · Support

일출 직전/일몰 직후 차가운 청색. 고요, 멜랑콜리

Neon Glow

네온 글로우 · Core

인공 네온 광원. 도시 야경, 나이트라이프

Foggy/Hazy

안개/연무 · Support

안개/연무. 원경 흐릿. 몽환적, 신비

Crisp/Clean

크리스프/클린 · Core

대기 효과 없는 선명. 깨끗하고 명료. UI 기본

Bokeh

보케 · Core

초점 밖 빛 원형 산란. 로맨틱, 축제, 나이트

Cottagecore

코티지코어 · Support

전원 로맨틱. 리넨, 들꽃, 베이킹, 자연광

Dark Academia

다크 아카데미아 · Support

트위드, 고서, 촛불, 가을 톤. 학구적 고전주의

Liminal Space

리미널 스페이스 · Support

빈 형광등 공간, 전이 공간의 언캐니 고요

Solarpunk

솔라펑크 · Support

녹색 유토피아. 아르누보 곡선 + 식물 건축 + 재생에너지

스킬로 쓰는 법

이 어휘를 Claude Code · Codex 에서 바로 호출합니다

사전은 읽기용 목록이 아니라 visual-asset-prompt 스킬이 참조하는 어휘 SSOT 입니다. 막연한 의도를 넣으면 같은 절차로 검증된 프롬프트와 이미지가 나옵니다.

의도

"이런 느낌" 한 줄

→

visual-asset-prompt

FORMAT 고정 → LOOK → SUBJECT

→

derive

충돌·네거티브 검증

→

nano-gen

Nano Banana 생성

→

결과

프롬프트 + 이미지

Claude Code

슬래시 커맨드나 자연어로 부르면 스킬이 사전을 SSOT 로 참조해 절차를 진행합니다.

/visual-asset 카페 메뉴 일러스트 시리즈

Codex · CLI

스킬 폴더의 스크립트를 그대로 실행합니다. 모든 스크립트와 SSOT 가 스킬 안에 들어 있어 자급합니다.

node .claude/skills/visual-asset-prompt/scripts/derive.mjs '["Risograph"]' "workshop scene"

활용법

포맷을 고정하고, 대상만 바꿉니다

키워드를 잔뜩 쌓는 대신, FORMAT(비율·구도·배경·크기·여백)을 패턴으로 먼저 고정하고 그 안에서 LOOK(매체·선·톤·색)을 잡습니다. 그다음 SUBJECT 만 바꾸면 시리즈가 됩니다. 아래 예제는 전부 visual-asset-prompt 스킬을 실제로 돌려 만든 결과이며, 각 시리즈에 그때 쓴 프롬프트를 그대로 붙였습니다.

FORMAT

패턴으로 고정비율·구도·배경·크기·여백

→

LOOK

그 안에서 다이얼 후 고정매체·선·톤·색

→

SUBJECT

유일한 가변메뉴 아이템마다

한 시리즈로 보는 동작 원리

FORMAT (고정)

에셋 타입

단일 오브젝트 (고립)

배경

없음 · 흰 배경

비율

1:1

구도

중앙, 살짝 위에서

오브젝트 크기

프레임의 약 60%

여백

오브젝트 주변 넉넉히

LOOK (고정)

매체·스타일

전통 인탈리오 에칭

선·톤

평행선 버린 해칭 + 크로스해칭

색 규칙

검정 잉크만

SUBJECT (가변) · 위 FORMAT·LOOK 을 그대로 둔 채 대상만 바뀜

Espresso

Cappuccino

Macchiato

Americano

Caffè Latte

Cortado

시리즈는 1장을 마스터로 만든 뒤 그 이미지를 레퍼런스로 고정해, 나머지는 대상만 바꿔 생성합니다. 그래서 구도·프레임·여백이 흐트러지지 않습니다.

스킬로 만든 활용 예제

같은 방식으로 매체와 비율, 에셋 타입만 바꿔 뽑은 시리즈입니다. 트렌디한 스타일과 활용 빈도가 높은 것을 섞었고, 각 시리즈마다 실제로 쓴 프롬프트와 네거티브를 함께 둡니다.

아티클·코스 썸네일

트렌디

FORMAT

장면 · 4:3

LOOK

리소그래프 2색 (Risograph)

A small team sketching together at a studio table during a design workshop, risograph print look with two spot inks of fluorescent pink and blue, coarse grain and slight off-registration, flat warm paper background, generous margin around the scene. For an editorial article thumbnail.

Avoid: chrome material, glossy surface, refraction

Claude Code + Nano Banana

마스터워크숍

마감

출시

브레인스토밍

Codex

워크숍

마감

출시

브레인스토밍

Codex 는 카드 썸네일에서 바로 읽히도록 프레임 안 여백을 줄이고 장면 대비를 키웠습니다.

feature·혜택 아이콘 세트

트렌디

FORMAT

단일 고립 · 1:1

LOOK

소프트 3D 클레이 (Clay Render)

A single padlock as a handmade clay icon, completely matte plasticine surface with no gloss, visible fingerprint marks and surface irregularities, fine matte clay grain, vivid saturated bright cobalt blue body with bright green accents, soft diffuse even light, rounded friendly forms, isolated on a clean white background, centered, the object filling about 60 percent of the frame with generous even margins. For a product feature benefit icon set.

Avoid: glossy, plastic sheen, specular highlight, washed-out pastel

Claude Code + Nano Banana

마스터자물쇠

로켓

톱니

하트

Codex

자물쇠

로켓

톱니

하트

Codex 는 다크모드 제품 타일에서 바로 쓸 수 있게 배경과 재질을 고정했습니다.

메뉴·배달앱 푸드 일러스트

트렌디 + 활용 빈도 높음

FORMAT

단일 고립 · 1:1

LOOK

플랫 벡터 + 소프트 셰이딩 (Flat Vector Illustration)

A single gourmet burger as a modern flat vector food illustration, clean flat shapes with soft gradient shading, warm appetizing palette of golden bun, fresh green and tomato red, subtle depth, isolated on a clean light background, centered, the object filling about 60 percent of the frame with generous even margins. For a food delivery app menu illustration.

Avoid: cross-hatching, film grain, photorealistic

Claude Code + Nano Banana

마스터버거

라멘

샐러드볼

팬케이크

Codex

버거

라멘

샐러드볼

팬케이크

Codex 는 메뉴 스캔에 맞춰 음식을 크게 잡고 식욕 자극 색을 더 강하게 유지했습니다.

본문 스팟 삽화

활용 빈도 높음

FORMAT

단일 고립 · 4:5

LOOK

펜 선 + 과슈 워시 (Gouache)

A single compass as an editorial spot illustration, loose hand-drawn pen line work with matte gouache color washes in a restrained two-tone palette, subtle paper grain, isolated with a generous white margin, placed slightly off center. For an inline blog illustration.

Avoid: glitch, glossy surface, neon

Claude Code + Nano Banana

마스터나침반

사다리

등대

매듭

Codex

나침반

사다리

등대

매듭

Codex 는 본문 삽화가 은유로 작동하도록 어두운 배경과 큰 실루엣을 고정했습니다.

AI·SaaS 제품·인프라 일러스트

테크·AI 스타트업

FORMAT

아이소메트릭 장면 · 1:1

LOOK

아이소메트릭 벡터 (Isometric Illustration)

A small isometric illustration of a cloud server stack with a few connected nodes, clean flat vector style with smooth polished edges, 30 degree isometric projection, restrained modern tech palette of blue, violet and soft grey with one accent color, subtle soft long shadows, isolated on a clean light background, centered with generous margins. For an AI SaaS product landing feature illustration.

Avoid: film grain, ink bleed, hand-drawn texture

Claude Code + Nano Banana

마스터서버 스택

데이터 파이프라인

신경망 모델

분석 대시보드

Codex

서버 스택

데이터 파이프라인

신경망 모델

분석 대시보드

Codex 는 AI 제품 표면처럼 보이도록 다크모드 인프라 무드와 무텍스트 구성을 맞췄습니다.

건축·공간 다이어그램

건축·공간

FORMAT

아이소메트릭 모노라인 · 1:1

LOOK

아이소메트릭 모노라인 (Isometric + Monoline)

A single modern two-story house drawn in isometric monoline style, clean consistent thin single-weight outline strokes, 30 degree isometric projection, mostly line work with minimal flat accent and one accent color, on a clean light background, centered with generous margins. For an architecture and space diagram.

Avoid: collage illustration, heavy color fills, photorealistic

Claude Code + Nano Banana