Pixel & Process 픽셀의 디테일과 과정의 기록

클릭을 부르는 상업용 띠배너 시각적 위계 & 프롬프트 가이드

danmi01 — Fri, 1 May 2026 20:45:08 +0900

안녕하세요, 디자인 공부를 하고 있는 단미입니다.

오늘은 이커머스와 웹 환경에서 즉각적인 메시지 전달과 클릭(CTA)을 유도해야 하는

'띠배너' 디자인 8종의 작업 과정을 기록해 보려 합니다.

이번 작업의 핵심은 기존 스톡 이미지가 주지 못하는 브랜드 맞춤형 질감을

생성형 AI(Firefly, Gemini)로 직접 렌더링하거나, 기존 에셋의 매력을 극대화하는 레이아웃을 짜는 것이었습니다.

웹 표준인 860x200px 규격과 모바일 팝업을 고려한 600x200px 규격 안에서,

각 인더스트리(뷰티, F&B, IT, 게임 등)의 타겟층을 어떻게 시각적으로 설득했는지 그 과정을 공유합니다.

1. POZE (뷰티 / 코스메틱)

[제작 배경]

코스메틱 브랜드 'POZE'의 신규 고객 유치를 위한 5,000원 웰컴 쿠폰 발급 배너입니다.

뷰티 고관여 타겟에게 따뜻하고 아늑한 인상을 주어 전환을 이끌어내는 것이 목표였습니다.

⚙️ [핵심 소스 큐레이션 및 보정]

원본 이미지의 매트한 질감이 돋보이도록 정밀한 누끼 작업을 진행했고,

배경에는 피부 결이나 파우더를 연상시키는 은은한 텍스처지를 매칭하여 웜톤 특유의 무드를 극대화했습니다.

[주요 작업 포인트]

시선 유도 : 우측의 제품에서 시작해 좌측의 쿠폰 혜택으로 시선이 자연스럽게 안착하도록 Z-Pattern 레이아웃을 설계했습니다.

[맺음말/회고]

기존 소스를 활용하더라도 톤앤매너에 맞는 배경 텍스처를 세심하게 고르고 얹어내는 것만으로도 전체적인 브랜드의 온도를 맞출 수 있음을 확인했습니다.

2. 컬러핏 (퍼스널컬러 / 서비스)

[제작 배경]

자신의 '인생 컬러'를 찾고자 하는 유저들의 호기심을 자극해 진단 서비스로 이끄는 인터랙티브 배너입니다.

⚙️ [핵심 소스 큐레이션 및 배치]

복잡한 실사 대신 2D 플랫 벡터 스타일의 팬톤 스와치와 추상적인 그래픽을 조합했습니다. 모바일 환경에서의 가독성을 위해 다채로운 색상들이 튀지 않도록 연한 파스텔 피치 톤 배경으로 시각적 밸런스를 잡았습니다.

[주요 작업 포인트]

CTA(Call To Action) 강조: 가장 중요한 '진단해 드릴게요!' 버튼에 border-radius로 둥근 모서리를 주고, 빨간색 하트 아이콘을 배치해 명확한 시각적 포인트를 주었습니다.

[맺음말/회고]

다양한 색상을 다룰 때는 명도 높은 단색 배경으로 전체를 차분하게 눌러주어야 텍스트의 가독성이 무너지지 않는다는 기본기의 중요성을 되새겼습니다.

3. JS (전문 기기 / B2B)

[제작 배경]

25년간 축적된 B2B 유통 및 정밀 수리 서비스의 신뢰감과 전문가용 미용 가위의 묵직한 책임감을 표현하고자 했습니다.

⚙️ [핵심 소스 제작(AI 활용)]

Prompt: [Subject] Professional hairdressing scissors resting on a sleek dark surface, [Style/Texture] hyper-realistic, highly detailed metallic texture, sharp edges, [Lighting/Atmosphere] cool cinematic studio lighting with deep blue hues, [Camera/Angle] macro close-up, dramatic perspective, [Technical Specs] 8k resolution, photorealistic.
Analysis: '완벽한 절삭력'을 표현하기 위해 차가운 금속성(metallic texture) 키워드를 강조했습니다. 딥 블루 톤의 시네마틱 조명이 가위의 날 선 하이라이트에 맺히도록 유도하여 전문가용 장비의 하이엔드 아우라를 완성했습니다.

[주요 작업 포인트]

보색 대비와 정렬: 네이비 배경에 옐로우(골드)와 화이트 텍스트를 올려 가독성을 극대화하고, 우측 정렬로 무게감을 주었습니다.

[맺음말/회고]

브랜드의 '책임감'이라는 추상적인 가치를 차가운 금속 질감과 빛의 온도로 시각화해 낸 고도화된 작업이었습니다.

4. OUVRIR (F&B / 와인)

[제작 배경]

엄선된 프리미엄 와인 테이스팅 노트를 제공하는 서비스로, 프라이빗하고 우아한 저녁의 무드를 전달하고자 했습니다.

⚙️ [핵심 소스 제작(AI 활용)]

Prompt: [Subject] Two elegant wine bottles resting on a deep red plush velvet box, [Style/Texture] hyper-realistic, sleek glass texture, soft velvet fabric, [Lighting/Atmosphere] moody cinematic lighting, dramatic shadows, warm highlights, [Camera/Angle] slight low angle, [Technical Specs] dark background, 8k.
Analysis: 매끄러운 유리(sleek glass) 와인병과 푹신한 벨벳(plush velvet)이라는 두 가지 상반된 물성을 한 프레임에 조화시키기 위해 명암 대비가 강한 무디(Moody) 조명 렌더링을 지시했습니다.

[주요 작업 포인트]

포인트 컬러 디자인: 브랜드 로고 아래 언더라인으로 시선을 고정시키고, 서브 카피 중 '프리미엄 와인' 텍스트에만 버건디 컬러를 적용하여 배경의 벨벳 무드와 텍스트의 질감을 일치시켰습니다.

[맺음말/회고]

피사체의 반사광을 살리면서 텍스트가 묻히지 않게 그라데이션 마스크로 명도를 조절하는 포토샵 합성 스킬의 디테일을 살렸습니다.

5. 제로 웨이스트 (라이프스타일 / 캠페인)

[제작 배경]

불필요한 포장을 덜어낸 친환경 가치 소비 캠페인으로, 유기적이고 자연 친화적인 메시지를 직관적으로 전달하고자 했습니다.

⚙️ [핵심 소스 제작(AI 활용)]

Prompt: [Subject] A miniature earth globe made of real moss and soil, carrying a small eco-friendly cotton tote bag with wooden cutlery, [Style/Texture] 3D realistic miniature, tactile organic textures, [Lighting/Atmosphere] warm studio lighting, soft shadows, [Camera/Angle] top-down angled view, [Technical Specs] isolated on warm beige background.
Analysis: 지구를 흙과 이끼의 실제 질감(real moss and soil)으로 렌더링하여 환경 보호의 메시지를 은유했습니다. 점토 모형 같은 '3D realistic miniature' 양식으로 대중적인 친근감을 높였습니다.

[주요 작업 포인트]

입체적 레이어링: 배경에 반투명한 원형 패턴을 여러 겹 깔아 깊이감을 주었습니다.

[맺음말/회고]

스톡 이미지 플랫폼에서는 찾기 힘든 유기적 형태의 오브제를 직접 프롬프팅하여 브랜드 캠페인에 완벽히 부합하는 비주얼을 도출했습니다.

6. 귀혼 (게임 / 판타지)

[제작 배경]

무협 MMORPG 액션 게임의 동양적 판타지 세계관과 부적이 쏟아지는 화려한 스킬 이펙트를 좁은 배너 프레임 안에 역동적으로 압축했습니다.

⚙️ [핵심 소스 제작(AI 활용)]

Prompt: [Subject] Glowing yellow paper talismans swirling around in a magical vortex, traditional asian wooden room background, [Style/Texture] 2D game art style, glowing effects, [Lighting/Atmosphere] dynamic dramatic lighting, magical aura, [Camera/Angle] dynamic action shot, [Technical Specs] high resolution, game asset.
Analysis: 원작 캐릭터 화풍과의 통일성을 위해 '2D game art style'을 베이스로 지정하고, 부적의 궤적(magical vortex)과 자체 발광 효과(glowing effects)를 강조해 스펙터클함을 살렸습니다.

[주요 작업 포인트]

Z축 타이포그래피 설계: '부적의 비'라는 메인 타이틀의 앞공간과 뒷공간으로 파티클 레이어를 엇갈리게 합성하여, 텍스트가 3D 공간 한가운데 떠 있는 듯한 입체적인 깊이감을 구현했습니다.

[맺음말/회고]

2D 캐릭터 원본의 시각적 위계를 해치지 않으면서 이벤트의 스케일을 보여주는 화려한 이펙트 레이어링 스킬을 고도화할 수 있었습니다.

7. Aethel (IT 기기 / 스마트워치)

[제작 배경]

클래식한 아날로그 감성과 최신 스마트 퍼포먼스를 동시에 지닌

프리미엄 스마트워치의 고도화된 기술력을 시각적으로 설득하는 디자인입니다.

⚙️ [핵심 소스 제작(AI 활용)]

Prompt: [Subject] A premium metallic smartwatch with a classic analog face, [Style/Texture] hyper-realistic, sleek stainless steel watch band, glossy glass, [Lighting/Atmosphere] clean studio lighting, sharp reflections, [Camera/Angle] macro close-up, dramatic diagonal placement, [Technical Specs] minimalist light grey background, 8k.
Analysis: 메탈 밴드의 미세한 브러시 결속과 유리의 날카로운 반사광을 위해 macro close-up 앵글을 사용했습니다. 사선 구도는 기기의 엣지와 세련미를 돋보이게 합니다.

[주요 작업 포인트]

무채색과 포인트 컬러 대비: 라이트 그레이와 실버 톤으로 전체적인 무드를 차분하게 누른 뒤, 브랜드 네임 'Aethel'에만 강렬한 웜톤 오렌지 포인트를 주어 시각적 각인 효과를 극대화했습니다.

[맺음말/회고]

고해상도 IT 기기 렌더링 시 금속 표면에 맺히는 빛의 방향성을 계산하여, 제품의 품격을 시각적으로 증명하는 좋은 사례가 되었습니다.

8. 틱톡 (숏폼 플랫폼 / 모바일 UI)

[제작 배경]

숏폼 트렌드를 주도하는 플랫폼의 아이덴티티를 담아, 모바일 환경(600x200px)에 최적화된 앱 내 챌린지 팝업 배너를 기획했습니다.

[주요 작업 포인트]

모바일 가독성 및 중앙 정렬: 600px의 좁은 너비 안에서 중앙 집중형 레이아웃을 채택하여, '100만 원'과 '지금 다운로드'라는 핵심 정보에 시선이 꽂히도록 설계했습니다. 반응형 퍼블리싱 시 vw 단위를 활용한 텍스트 크기 조절을 염두에 두었습니다.

[맺음말/회고]

빠르게 스크롤하는 모바일 유저의 호흡을 고려해, 단번에 시선을 사로잡는 고대비 네온 컬러 전략을 성공적으로 구현했습니다.

디자인 작업에 있어 AI는 단순한 자동화 도구가 아니라,

기획자의 의도를 정확한 빛과 질감으로 구현해 주는 '무한한 소품실'이라는 것을 이번 배너 작업들을 통해 다시 한번 느낍니다.

[Banner Design] AI를 활용한 'Magical Christmas' 배너 제작기

danmi01 — Sat, 18 Apr 2026 01:27:17 +0900

안녕하세요, 디자인 공부를 하고 있는 단미입니다!

오늘은 연말의 설렘을 가득 담은 'Magical Christmas' 프로모션 배너 작업기를 들고 왔습니다.

이번 작업은 단순히 이미지를 생성하는 것에 그치지 않고, AI를 활용하여 각각의 오브제를 따로 생성하고 이를 포토샵에서 하나의 거대한 세계관으로 조립하는 방식으로 진행해 보았습니다.

그럼, 환상적인 크리스마스 극장으로 함께 떠나볼까요?

1. Project Overview (프로젝트 개요)

디자인 제목: Magical Christmas - Shinsegae Theater
메인 카피: SHINSEGAE THEATER
사용 툴: Adobe Firefly, Midjourney (소스 생성), Photoshop (합성 및 리터칭)
핵심 시각적 과업:
- 3D 클레이 질감의 캐릭터와 실사 배경의 조화로운 합성.
- '프레임-배경-전경' 레이어 구성을 통한 압도적인 공간감 구현.
- 대형 보름달과 조명을 활용한 시네마틱한 분위기 연출.

2. Concept & Planning (기획 의도)

이번 디자인은 "눈 내리는 밤, 마을 위를 날아오르는 루돌프의 마법 같은 순간"을 모티브로 삼았습니다.

크리스마스 하면 신세계 본점 앞의 대형 스크린이 생각나 신세계에서 루돌프를 컨셉으로 이벤트를 한다면 어떤 배너로 홍보 할까? 라고 생각하며 시작하게 되었습니다.

기존의 평면적인 배너에서 벗어나, 관객이 마치 극장의 1열에서 이 장면을 직관하는 듯한 느낌을 주기 위해 초광각 로우 앵글(Worm's eye view) 전략을 선택했습니다. 신세계 라는 브랜드 이미지에 걸맞게 고전적인 우아함(Legacy)과 상상력(Fantasy)이 공존하는 시각적 경험을 목표로 했습니다.

3. Source Analysis & AI Workflow (제작 과정)

이번 작업의 핵심은 각 소품의 밀도를 높이기 위해 소스를 개별적으로 생성한 것입니다.

각 파트별로 사용된 프롬프트와 의도를 분석해 드리겠습니다.

① 루돌프 캐릭터 (The Hero)

주인공인 루돌프는 따뜻한 질감이 느껴지는 3D 클레이 스타일로 연출하여 친근함을 더했습니다.

Prompt: A cute baby reindeer with a glowing red nose, 3D clay-like texture, fluffy fur details, dynamic jumping pose, wearing a thin brown harness, high-definition 3D render, studio lighting, isolated on white background.

분석: 3D clay-like texture 키워드를 통해 캐릭터의 입체감을 살렸으며, Isolated on white background를 추가해 포토샵에서 누끼(배경 제거) 작업을 용이하게 했습니다.

② 썰매와 선물 상자 (The Props)

루돌프가 끌고 가는 썰매는 클래식한 레드와 골드 조합으로 고급스러움을 강조했습니다.

Prompt: An antique luxury red and gold Christmas sleigh, carrying a large red gift box with a big golden silk ribbon, intricate gold carvings, cinematic lighting, 8k resolution, 3D render style, side view.

분석: Intricate gold carvings 키워드는 썰매의 디테일을 높여주어 전체적인 디자인의 퀄리티를 끌어올리는 역할을 했습니다.

③ 마을과 보름달 배경 (The Stage)

전체적인 분위기를 결정짓는 배경은 몽환적인 밤의 풍경으로 설정했습니다.

Prompt: A cozy miniature snowy village at night, warm yellow lights glowing from small wooden house windows, a gigantic bright full moon in the center of the dark blue sky, snow-covered fir trees, cinematic atmosphere, wide angle.

분석: Gigantic bright full moon을 중앙에 배치하여 시각적 포인트(Point of Interest)를 만들고, 루돌프의 실루엣이 돋보이도록 유도했습니다.

④ 크리스마스 오너먼트 프레임 (The Frame)

이미지의 깊이감을 더해줄 전경(Foreground) 요소입니다.

Prompt: A festive Christmas pine tree branch wreath frame, hanging red and gold baubles with glittery patterns, sparkling fairy lights, extreme close-up, blurry background, high-definition.

분석: Extreme close-up과 전경 배치를 통해 관찰자가 숲속에서 이 광경을 훔쳐보는 듯한 '프레임-배경-전경'의 3단계 레이어 구조를 완성했습니다.

4. Design Details (디자인 가공)

AI로 생성된 소스들을 포토샵으로 가져와 다음과 같은 세밀한 리터칭 과정을 거쳤습니다.

레이어링 및 구도: 하단에서 위를 올려다보는 듯한 배치를 통해 루돌프의 역동성을 극대화했습니다.
광원 일치: 중앙의 거대한 달을 메인 광원으로 설정하고, 루돌프와 썰매의 등 부분에 밝은 하이라이트를 추가하여 빛의 방향성을 통일했습니다.
타이포그래피: 가독성이 좋고 힘 있는 서체를 사용하여 중앙에 배치했습니다. 글자 내부에 은은한 텍스처를 주어 배경의 달과 자연스럽게 어우러지도록 설계했습니다.

5. Final Result & Conclusion (최종 결과 및 후기)

완성된 배너는 제가 기획했던 '따뜻하면서도 웅장한 겨울의 환상'을 충실히 구현해냈습니다.

이번 작업을 통해 AI는 단순한 도구를 넘어, 디자이너의 상상을 현실로 만들어주는 협업관계임을 다시 한번 깨달았습니다.

특히 각 요소를 따로 생성해 합성하는 방식은 기성 스톡 이미지의 제약에서 벗어나 저만의 독창적인 구도를 만드는 데 큰 도움이 되었습니다.

다음에는 또 어떤 상상을 시각화해볼지 벌써 설레네요! 디자인에 대해 궁금한 점이 있다면 언제든 댓글 남겨주세요. 감사합니다. :)

flex 클릭 한 번으로 끝내는 CSS Flexbox 완벽 정복

danmi01 — Fri, 17 Apr 2026 12:33:15 +0900

CSS Flexbox 인터랙티브 학습기

아이템 수 4

제작 배경: "왜 만들었나요?" 웹 디자인과 퍼블리싱을 공부하다 보면 가장 높은 벽 중 하나가 바로 CSS Flexbox 레이아웃입니다. justify-content와 align-items의 차이, flex-grow가 실제 공간을 나누는 복잡한 계산 방식 등 이론만으로는 직관적으로 이해하기 어려운 부분들이 많았습니다.

시중의 레퍼런스 사이트들은 단순히 고정된 예시만 보여주어, 내가 원하는 아이템 개수로 자유롭게 테스트하기엔 한계가 있었습니다. 그래서 "내가 직접 값을 조절하며 즉각적인 변화를 확인하고, 실무에 바로 쓸 수 있는 코드까지 바로 얻을 수 있는 도구"가 필요해 직접 제작하게 되었습니다.

포인트: "눈으로 보고 손으로 익히는 CSS 레이아웃, 복잡한 이론 대신 직관적인 시뮬레이션"
특징: HTML 파일 하나로 실행되는 가벼운 구조이며, 별도의 설치 없이 브라우저에서 즉시 학습할 수 있습니다.

✨ 주요 기능 소개

① 실시간 속성 시뮬레이션 (Real-time Preview)

justify-content, align-items, flex-direction 등 핵심 속성 버튼을 클릭하면 즉시 레이아웃 변화를 확인할 수 있습니다.
주축(Main Axis)과 교차축(Cross Axis)에 따른 아이템의 배치를 시각적으로 완벽히 이해하도록 돕습니다.

② 아이템 개수 자유 조절 (Dynamic Item Control)

아이템 수를 1개부터 6개까지 자유롭게 조절하며, 아이템 개수에 따라 space-between이나 space-around가 어떻게 다르게 반응하는지 실시간으로 비교해 볼 수 있습니다.

③ 스마트 코드 제너레이터 (Live Code Snippet)

현재 설정된 레이아웃이 실제 CSS 코드로 어떻게 구현되는지 하단 Code Box에 실시간으로 표시됩니다.
가독성 높은 구문 강조(Syntax Highlighting)가 적용되어 있어, 코드를 그대로 복사해 본인의 프로젝트에 바로 적용할 수 있습니다.

④ 초보자를 위한 '주의사항' 팝업 (Expert Tips)

flex-wrap의 nowrap 사용 시 주의점이나, flex-grow의 비율 계산 방식 등 입문자가 자주 하는 실수들을 '!' 아이콘을 통해 꿀팁으로 제공합니다.

사용 방법

상단에 첨부된 'flex-learner.html' 파일을 다운로드하여 실행하거나, 코드 블록을 확인합니다.
속성 탭에서 학습하고 싶은 Flexbox 속성을 선택합니다.
아이템 수 버튼을 눌러 테스트하고 싶은 환경을 설정합니다.
다양한 값(Value) 버튼을 눌러보며 레이아웃이 어떻게 변하는지 감상합니다.
하단에 자동으로 생성된 CSS 코드를 확인하고 실무에 활용해 보세요!

단순히 CSS 속성을 암기하는 것을 넘어, 레이아웃이 유연하게 반응하는 원리를 깊이 있게 이해할 수 있는 도구가 되었으면 좋겠습니다.

이 프로그램은 HTML 파일 하나로 구성되어 있어, 소스 코드를 복사해 개인 블로그 페이지에 적용하거나 로컬에 저장해두고 언제든 꺼내 쓰실 수 있습니다. 저처럼 레이아웃 구조를 잡을 때마다 고민이 많으셨던 분들께 이 작은 도구가 큰 도움이 되길 바랍니다!

[Project] 가을 한자락 머무는 곳: 생성형 AI로 완성한 '한옥 스테이' 프로모션 배너

danmi01 — Thu, 16 Apr 2026 01:34:16 +0900

안녕하세요, 디자인 공부를 하고 있는 단미입니다.

사계절 프로모션 배너 제작중에 있습니다.

이번에는 고즈넉한 가을의 정취를 느낄 수 있는 '나만 알고 싶은 한옥 스테이' 프로모션 배너 디자인을 진행해 보았습니다.

지난 작업이 통통 튀는 컬러감의 키링 오브제에 집중했다면, 이번에는 전통적인 한옥의 창틀(팔각창)을 프레임으로 활용하여 마치 창밖의 풍경을 감상하는 듯한 공간감과 가을 특유의 따뜻한 감성을 담아내는 데 중점을 두었습니다.

이번에도 Adobe Firefly와 Gemini를 활용해 모든 핵심 소스를 직접 제작했습니다.

1. 디자인 모티브 및 기획: "한옥에서 누리는 온전한 휴식"

이번 프로젝트의 키워드는 '머무름'과 '쉼'입니다.

바쁜 일상에서 벗어나 단풍이 물든 한옥 마루에 앉아 따뜻한 차 한 잔을 마시는 순간을 상상했습니다.

비주얼 컨셉: 팔각 창틀을 메인 프레임으로 설정하여 시선을 중앙으로 집중시키고, 그 주변에 가을을 상징하는 오브제(낙엽, 밤, 감, 꽃신 등)를 배치해 풍성한 가을 느낌을 연출했습니다.
사이즈 설정: 인스타그램 카드뉴스나 웹 배너로 활용하기 좋은 세로형 규격으로 작업하여, 고화질 AI 소스들의 질감이 생생하게 전달되도록 했습니다.

2. 핵심 소스 제작: AI로 구현한 가을의 조각들

원하는 구도와 소품을 얻기 위해 각 요소별로 세밀한 프롬프트를 설계했습니다.

이번 작업에서 생성한 주요 소스들과 분석한 프롬프트를 공유합니다.

(1) 창 밖으로 펼쳐지는 가을 한옥 풍경 (Firefly)

창틀 너머로 보일 메인 배경입니다. 단풍과 은행나무가 어우러진 한옥 마당의 평화로운 분위기를 요청했습니다.

[AI Prompt] A cinematic, high-definition photo of a traditional Korean Hanok village during autumn. Vibrant red maple trees and golden yellow ginkgo trees under warm sunset lighting. In the center, a traditional stone well and a small tea table with a teapot. Soft, nostalgic atmosphere.

(2) 입체적인 팔각 창틀과 노리개 아이콘

배너의 뼈대가 될 팔각창과 상단에 포인트가 될 노리개(책갈피) 소스입니다.

[AI Prompt - 창틀] A detailed 3D render of a traditional Korean octagonal wooden window frame (Pal-gak-chang). Intricate geometric lattice patterns, high-quality dark wood texture, isolated on a plain background.

[AI Prompt - 노리개] A flat digital illustration of a traditional Korean Norigae (ornamental tassel). Deep burgundy background, golden silk knots, and elegant hanging tassels. Symmetrical and minimal design.

팔각창은 ai 생성 후 포토샵에서 수정하여 사용하였습니다.

(3) 가을의 정취를 더하는 소품들 (3D Render Style)

하단부를 풍성하게 채워줄 꽃신, 캠핑 의자, 전통 등불, 가을 열매들을 세트로 생성했습니다.

[AI Prompt - 소품 세트] 3D render of Korean traditional items: 1. Warm fabric flower shoes (Kkotsin) with acorns. 2. A wooden floor lantern with warm light. 3. A modern beige camping chair. 4. Ripe persimmons, pinecones, and cosmos flowers. All items have a soft, cozy 3D clay-like texture, high-quality, white background.

(4) 종이접기 스타일의 단풍잎

공중에 흩날리는 효과를 주기 위해 일반적인 낙엽 대신 독특한 '종이접기(Origami)' 스타일의 잎사귀를 제작했습니다.

[AI Prompt - 낙엽] Top-down view of three origami paper-folded autumn leaves: a yellow maple leaf, a red maple leaf, and a brown leaf. Sharp edges, realistic paper texture, minimalist style on a white background.

3. 주요 작업 포인트: 레이어링과 감성적인 타이포그래피

① 공간감 있는 합성 단순히 평면적인 합성이 아니라, 창틀(Frame) - 한옥 배경(Background) - 전경 오브제(Foreground)의 3단계 레이어 구성을 통해 깊이감을 주었습니다. 특히 하단에 배치한 꽃신과 의자는 창틀 밖으로 살짝 튀어나오게 배치하여 입체감을 극대화했습니다.

② 가을의 색감 보정 전체적으로 노을이 지는 듯한 오렌지-골드 톤으로 컬러 밸런스를 맞추었습니다. AI로 생성한 각 소품들의 조명 방향이 일치하도록 리터칭하여 이질감을 줄였습니다.

③ 타이포그래피와 배치

메인 카피: "나만 알고 싶은 한옥스테이"를 볼드한 폰트로 중앙에 배치해 가독성을 높였습니다.
서브 카피: 상단에 "가을 한자락 머무는 곳"이라는 문구를 배치해 서정적인 분위기를 더했습니다.

마치며

지난번 여름 배너 작업이 '오브제의 나열'을 통한 화려함에 집중했다면, 이번 가을 배너는 '프레임을 통한 시선의 확장'에 중점을 두었습니다.

특히 이번 작업을 통해 느낀 점은, AI가 단순히 이미지를 만들어주는 도구를 넘어 디자이너가 상상하는 복잡한 세트장을 구성해주는 '디지털 소품실' 역할을 할 수 있다는 것이었습니다. 창틀, 가구, 낙엽 하나하나를 제가 원하는 '결'에 맞춰 생성하고 조립하는 과정에서 디자인의 자율성이 훨씬 높아짐을 경험했습니다.

전통적인 아름다움을 현대적인 3D 질감으로 재해석해 본 즐거운 작업이었습니다. 작업 과정에 대해 궁금한 점이 있다면 언제든 댓글 남겨주세요! ✨

PNG 용량 축소 프로그램 큰 파일도 걱정 없이 !

danmi01 — Tue, 14 Apr 2026 23:35:53 +0900

이미지 압축 · 변환기

PNG · JPG · WebP 변환 및 압축 — 모든 처리는 브라우저에서만 이뤄집니다 (서버 업로드 없음)

클릭하거나 파일을 드래그하세요 PNG, JPG, WebP, GIF, BMP · 여러 파일 동시 처리 가능

변환 설정

출력 형식

압축 품질

82%

크기 조절 (너비 기준)

px · 비율 유지

크기 조절 활성화

메타데이터 제거 (EXIF · GPS 등)

그레이스케일 변환

✅ 변환 완료! 전체 다운로드 버튼을 누르면 파일이 순서대로 저장됩니다.
브라우저 설정에 따라 팝업 차단 알림이 뜰 수 있습니다 — 허용을 눌러주세요.

image-converter.html

19.7 kB

제작 배경: "왜 만들었나요?"

웹 서핑을 하거나 블로그에 사진을 올릴 때, PNG 파일의 무지막지한 용량 때문에 로딩 속도가 느려졌던 경험 다들 있으시죠?

시중에 있는 압축 사이트들은 '한 번에 20장 제한'이 걸려있거나, 소중한 내 사진이 '서버에 업로드'된다는 찝찝함이 있었습니다.

그래서 "내 브라우저 안에서만 안전하고 빠르게, 그리고 무제한으로" 쓸 수 있는 도구가 필요해 직접 만들게 되었습니다.

포인트: "서버 업로드 NO! 개인정보 걱정 없이 브라우저에서 끝내는 이미지 다이어트"
특징: 복잡한 설치 없이 HTML 파일 하나로 압축, 크기 조절, 형식 변환까지 한 번에 해결합니다.

✨ 주요 기능 소개

① 100% 클라이언트 사이드 처리 (Privacy First)

사용자의 이미지는 절대 외부 서버로 전송되지 않습니다.
모든 압축과 변환 과정이 여러분의 PC 브라우저 자원을 활용해 이루어지므로 보안이 완벽합니다.

② 드래그 앤 드롭 멀티 컨버팅

여러 장의 사진을 한꺼번에 마우스로 끌어다 놓으세요.
PNG, JPG, WebP는 물론 BMP, GIF까지 지원하며, 클릭 한 번으로 모든 파일을 동시에 변환할 수 있습니다.

③ 스마트 압축 설정 (Quality Control)

품질 조절: 10%부터 100%까지 슬라이더로 직관적으로 용량을 조절합니다.
크기 조절: 고해상도 이미지를 웹용으로 빠르게 리사이징할 수 있습니다 (너비 기준 비율 유지).
부가 기능: 개인정보 보호를 위한 EXIF 메타데이터 제거 기능과 감성적인 그레이스케일(흑백) 변환 모드를 지원합니다.

④ 한눈에 보는 절감 효과

압축 전후의 용량을 실시간으로 비교해 드립니다.
몇 %의 용량이 줄어들었는지, 총 얼마만큼의 하드 용량을 아꼈는지 요약 바를 통해 직관적으로 확인하세요.

사용 방법

중앙의 드롭존에 파일을 드래그하거나 클릭하여 파일을 추가합니다.
오른쪽 설정창에서 원하는 포맷(JPG/WebP/PNG)과 압축 품질을 정합니다.
[변환 시작] 버튼을 누르면 순식간에 처리가 완료됩니다.
[전체 다운로드]를 눌러 변환된 이미지들을 저장하세요!

맺음말

단순히 용량을 줄이는 것을 넘어, 웹사이트 로딩 속도를 개선하고 데이터 사용량을 아껴주는 효율적인 도구가 되었으면 좋겠습니다.

이 프로그램은 HTML 파일 하나로 구성되어 있어, 소스 코드를 복사해 개인 블로그 페이지에 적용하거나 로컬에 저장해두고 언제든 꺼내 쓰실 수 있습니다. 저처럼 대량의 이미지를 자주 다루는 분들께 작은 도움이 되길 바랍니다!

[Banner Design] <PICK! YOUR SUMMER> 나만의 여름을 담은 키링 프로모션 배너

danmi01 — Tue, 14 Apr 2026 23:16:49 +0900

안녕하세요, 디자인 공부를 하고 있는 단미입니다.

지난번 몽환적인 밤의 봄 배너에 이어, 이번에는 다가오는 뜨거운 여름 시즌을 위한 'PICK! YOUR SUMMER' 프로모션 배너 디자인을 작업했습니다.

이번 작업 역시 특정한 브랜드나 제품의 제약 없이, 제가 상상한 '여름의 상징물'들을 하나의 매력적인 오브제로 묶어내는 실험적인 디자인입니다.

특히 고화질 소스를 확보하기 위해 생성형 AI를 적극적으로 활용하여 핵심 피사체와 배경을 직접 제작해 보았습니다.

1. 디자인 모티브 및 기획: "나만의 여름을 PICK하라"

이번 프로젝트의 핵심 컨셉은 '수집(Collect)'과 '선택(Pick)'입니다.

여름 하면 떠오르는 다양한 기억들과 상징들(파도, 모래, 과일, 귀여운 캐릭터)을 하나의 '키링(Keyring)'에 모아둔 모습을 상상했습니다.

"PICK! YOUR SUMMER"라는 메인 카피처럼,

고객들이 이 배너를 보고 자신만의 특별한 여름을 기대하며 프로모션에 참여하고 싶은 마음이 들도록 디자인했습니다.

사이즈 설정: 모바일과 웹에서 동시에 활용하기 좋은 세로형 배너 규격(약 1080x1350 비율)로 작업하여, 디테일한 소스들이 깨지지 않도록 고화질을 확보했습니다

2. 핵심 소스 제작: AI로 탄생시킨 '커스텀 키링'과 해변 배경'

이번 작업의 가장 중요한 두 가지 핵심 소스는 생성형 AI를 활용해 만들었습니다. 제가 상상한 이미지를 정확하게 얻기 위해 구체적인 프롬프트를 사용했습니다.

(1) 나만의 여름을 담은 커스텀 키링 (with. Gemini)

단순히 기성품 키링을 사용하는 것이 아니라, 이번 프로모션을 위해 특별히 제작된 것 같은 '커스텀 키링'을 원했습니다.

여름 상징물들이 골드 링에 매달려 있는 형태입니다.

[AI 프롬프트 - 여름 키링 오브제] A detailed, close-up, high-definition photorealistic 3D render of a custom summer-themed key ring. A central polished gold carabiner ring holds a set of dangling charms. The charms are: 1. A detailed 3D white polar bear wearing round sunglasses and an orange donut lifebuoy, with a horizontal striped shirt. 2. A large, matte peach-colored tag with "70% OFF" in raised white text. 3. A blue surfboard with "- % SALE -" written in vertical text. 4. A small, vertical orange tag with "SUMMER" text. 5. A set of tropical elements like palm leaves, small mangoes, and cherries clustered at the top near the ring. The charms are connected by small chains and rings. The object is floating slightly against a clean, plain background to be isolated, with soft, directional beach sunlight from the left.

분석: 골드 링, 각도, 선글라스를 낀 북극곰, 튜브, 70% OFF 태그, 파란 서핑보드 세일 태그, 오렌지 여름 태그, 열대 과일 및 잎. 이 구체적인 묘사를 통해 원하는 구도와 질감을 정확히 얻어냈습니다.

(2) 투명한 바다와 모래사장 배경

키링이 배치될 무대이자 전체적인 분위기를 결정하는 배경입니다. 투명하고 맑은 에메랄드빛 바다와 부드러운 모래사장을 원했습니다.

[AI 프롬프트 - 에메랄드 비치 배경] A detailed, high-definition photorealistic landscape of a pristine, idyllic summer beach scene. Emerald-green and turquoise ocean water gently laps onto soft, golden sand in the foreground. Several realistic seashells and a sandcastle built on the sand. The water is crystal clear with visible ripples. In the mid-ground, a chain of lush green tropical islands under a clear blue sky with some fluffy white clouds. Scattered iridescent water bubbles float in the air. Soft, warm sunlight from the top right.

분석: 에메랄드/터콰이즈 바다, 부드러운 금빛 모래, 사실적인 조개껍데기, 모래성, 열대 섬, 맑은 하늘, 비눗방울. 이 프롬프트를 통해 배너의 전체 톤을 잡았습니다.

3. 주요 작업 포인트: 합성, 타이포그래피, 그리고 디테일

(1) 배경 합성 및 디테일

배경 구성: AI로 생성한 비치 배경을 배너 크기에 맞게 배치했습니다. 하단의 모래사장과 상단의 하늘이 조화롭게 이어지도록 했으며, 배경에 있는 물방울 소스를 더 강조하여 청량감을 주었습니다.
오브제 배치: 하단 모래사장에 AI 생성 이미지에 있던 모래성과 조개껍데기를 더 잘 보이게 재배치하여 풍성함을 더했습니다.

(2) 키링 배치 및 이펙트

합성: 생성된 고화질 키링 이미지를 배경의 중앙 상단에 배치했습니다.

(3) 타이포그래피 및 레이아웃

최종 배너 디자인은 시선의 흐름을 고려한 중앙 집중형 구조를 채택했습니다.

메인 타이틀: 상단 중앙에 "PICK!"을 크고 흰색으로 배치하여 시선을 압도하고, 그 아래 "YOUR SUMMER"를 더 크고 볼드한 노란색으로 배치하여 강력한 메시지를 전달했습니다.
해시태그: 타이틀 아래에 "#여름세일 #최대70% #한정수량" 해시태그를 작게 배치하여 구체적인 정보를 제공했습니다.
정보 QR 코드: 왼쪽 상단에 QR 코드를 배치하여 추가 정보로의 접근을 유도했습니다.
하단 카피: 모래사장 위로 "여름 휴가를 완벽하게 만들어줄 특별한 혜택!"이라는 서브 카피를 배치하여 프로모션의 목적을 명확히 했습니다.

마치며

이번 작업은 여름이라는 주제를 시각적으로 매력적인 '키링'이라는 하나의 오브제로 압축하여 표현하는 시도였습니다.

생성형 AI를 활용해 제가 상상한 디테일한 키링 소스와 배경을 직접 만들고 배너로 구현하는 과정이 매우 즐거웠습니다.

원하는 이미지를 AI에게 정확히 요청하는 프롬프트 작성 능력과, 생성된 소스를 최종 결과물에 조화롭게 녹여내는 디자인 감각이 중요하다는 것을 다시 한번 느꼈습니다.

이번 배너가 포트폴리오에서 여름의 청량함과 다양한 소스를 다루는 역량을 보여주는 좋은 결과물이 될 것이라 생각합니다.

앞으로도 다양한 시도를 계속하겠습니다. 감사합니다.

[Banner Design] <밤 사이 피어난 기분 좋은 꿈> 몽환적인 봄 프로모션 배너

danmi01 — Tue, 14 Apr 2026 00:48:49 +0900

안녕하세요, 디자인 공부를 하고 있는 단미입니다.

이번 작업은 다가오는 봄 시즌을 위한 프로모션 배너 디자인입니다.

특정한 원작이 없는 저의 순수 창작 디자인으로, 고화질 소스를 확보하고 생성형 AI를 활용해 독특한 소스를 만드는 실험을 계속했습니다.

1. 디자인 모티브 및 기획: "밤의 봄, 꿈의 선물"

이번 프로젝트는 봄의 싱그러움에 "인형뽑기"라는 재미있는 요소를 결합했습니다.

몽환적인 분위기를 연출하기 위해 단순히 밝은 봄날이 아닌, 벚꽃이 만개한 "밤"을 테마로 선택했습니다.

구체적인 제품이나 서비스는 정하지 않았지만, "당신의 잠든 행운을 깨워보세요"라는 카피처럼,

봄의 시작과 함께 찾아올 행복이나 선물을 상상하며 디자인했습니다.

이는 어떤 프로모션에도 적용할 수 있는 보편적인 메시지입니다.

사이즈 설정: 웹 배너 규격에 맞춰 고화질로 작업하여, 다양한 플랫폼에서도 깨지지 않는 디테일을 확보하는 데 중점을 두었습니다.

(이미지 비율은 약 1080x1350의 비율로 작업했습니다.)

2. 핵심 소스 제작 : AI로 탄생시킨 몽환적인 피사체

이번 작업 역시 가장 중요한 두 가지 소스를 AI로 생성했습니다.

제가 상상한 몽환적인 분위기에 딱 맞는 소스를 직접 만들어 냈습니다.

(1) 인형뽑기 속 빛나는 구슬 (with.Gemini-nano banana2)

단순히 인형을 뽑는 것이 아니라, "꿈의 구슬"을 뽑는 듯한 느낌을 원했습니다.

[AI 프롬프트 - 구슬 크레인] An isolated, hyper-realistic photo of a sleek, dark-metallic claw crane mechanism from above, carefully grasping a glowing, iridescent crystalline orb containing a silver crescent moon and stars. The orb is bound by a thin, looped gold cord with tassels, glowing with internal purple and blue light. The background is a clean, dark gradient. Sharp focus, detailed textures.

분석: 메탈 크레인, 그립, 줄, 매듭, 테슬, 초승달과 별이 있는 빛나는 구슬, 어두운 배경. 이 프롬프트를 사용하여 원하는 구도와 질감을 정확히 얻어냈습니다.

(2) 벚꽃 가지 네온 라인 드로잉

배경에 자연스럽게 녹아들면서도 몽환적인 분위기를 낼 수 있는, 네온사인으로 활용하기 좋은 라인 드로잉이 필요했습니다.

[AI 프롬프트 - 벚꽃 라인 드로잉] A precise, clean, white outline line drawing of a delicate cherry blossom branch with multiple flowers, leaves, and a seed pod, against a solid black background. All lines are connected. Minimalistic design.

분석: 흰색 윤곽선, 벚꽃 가지, 꽃, 잎, 씨앗 꼬투리, 검은색 배경. 이 프롬프트를 통해 깔끔한 라인 아트를 얻을 수 있었습니다.

3. 주요 작업 포인트: 레이아웃과 이펙트

(1) 레이아웃 구성

최종 배너 디자인은 중앙 집중형 구조를 채택했습니다.

합성: 구슬 크레인을 중앙 상단에 배치하여 시선의 초점을 잡고, 벚꽃 가지를 배경의 양옆에 네온 효과를 주어 배치했습니다.
배경: 몽환적인 느낌을 위해 그라데이션이 있는 어두운 퍼플/블루 밤하늘 배경을 만들고, 흩날리는 벚꽃잎을 추가했습니다.

(2) 타이포그래피와 네온 이펙트

네온 효과: 생성된 벚꽃 가지를 어두운 배경에 맞게 색상을 연보라색/파란색으로 바꾸고, 네온 발광 효과를 주었습니다.
타이틀 로고: 타이틀 "밤 사이 피어난 기분 좋은 꿈"을 이 그라데이션과 어울리는 색상으로, 그리운 연이나 둥둥체를 활용해 중앙에 배치했습니다.
날짜: 날짜 "03.01 - 03.31"을 상단 중앙에 작게 배치하여 정보를 제공합니다.
카피: "당신의 잠든 행운을 깨워보세요"와 "행운 확인하기 >"라는 보조 카피를 하단에 배치하여 행동을 유도합니다.

중앙 집중형 구도: 인형뽑기 기계와 빛나는 구슬이 중앙에 배치되어 압도감을 줍니다.
모션 블러: 네온 효과의 발광을 부드럽게 처리하여 몽환적인 움직임을 시각화했습니다. 또한 일부 벚꽃잎에 블러 효과를 더해 텍스트로 시선을 모았습니다.
네온 패턴: 네온 효과가 있는 벚꽃 가지를 사용하여 현대적이고 세련된 느낌을 더했습니다.

마치며

이번 작업은 순수 창작으로, AI를 활용해 제가 상상한 몽환적인 소스(빛나는 구슬, 네온 벚꽃)를 직접 만들고 배너로 구현해 본 재미있는 과정이었습니다.

구체적인 제품이 없어도 디자인 컨셉과 메시지만으로 매력적인 프로모션 배너를 만들 수 있음을 배웠습니다.

내가 원하는 이미지를 AI에게 정확히 요청하는 프롬프트 작성 능력과, 이를 최종 결과물에 조화롭게 녹여내는 디자인 감각이 중요하다는 것을 다시 한번 느꼈습니다.

앞으로도 다양한 시도를 계속하겠습니다. 감사합니다.

[Poster Design] <박보검의 감사한 밤> 라디오 배너 제작기

danmi01 — Mon, 13 Apr 2026 01:55:16 +0900

안녕하세요, 디자인 공부를 하고 있는 단미입니다.

지난 <가비지타임> 영화 포스터 실사화 작업에 이어, 이번에는 감성을 담은 라디오 프로그램 티저 배너 디자인 작업을 진행해 보았습니다.

이번 작업의 주인공은 배우 박보검이며, 그가 진행하는 가상의 라디오 프로그램 <감사한 밤>을 모티브로 했습니다.

'누구일까요?'라는 궁금증을 유발하는 레이아웃부터 정보 전달력을 높인 최종안까지, 세 단계의 수정 과정을 거쳐 완성도를 높였습니다.

1. 디자인 모티브 및 기획: 궁금증을 자극하는 '밤의 주파수'

기획 의도: 라디오 첫 방송 전, DJ가 누구인지 맞혀보게 하는 이벤트성 티저 배너를 목표로 삼았습니다.
콘셉트 키워드: #감사 #미스터리 #밤하늘 #6.16Mhz (배우의 생일을 활용한 주파수 설정).
컬러 스킴: 깊은 밤을 상징하는 Midnight Blue를 메인으로, 따뜻한 달빛과 별빛을 상징하는 Yellow를 포인트 컬러로 사용해 시인성을 높였습니다.

2. 단계별 디자인 진화: 실루엣에서 정보의 완성까지

이번 작업은 한 번에 끝내지 않고, 사용자(팬)의 시선 흐름에 따라 세 번의 수정을 거쳤습니다.

Step 1 (초안): 가장 기본적인 실루엣과 텍스트 배치에 집중했습니다. '보건복지부(팬클럽 명칭)' 화살표를 통해 힌트를 주는 위트를 더했습니다.
Step 2 (수정): '나를 맞춰봐!'라는 말풍선 오브제를 추가하여 인터랙티브한 느낌을 살리고, 자칫 심심할 수 있는 우측 하단 여백을 보완했습니다.
Step 3 (최종안): * 디테일 강화: 배경에 별무리의 밀도를 조절하고 반짝이는 이펙트를 추가해 밤하늘의 깊이감을 더했습니다.
- 타이포그래피 완성: '감사한 밤'의 '밤' 자에 달 아이콘을 결합하여 로고로서의 상징성을 부여했습니다.
- 정보성 추가: 첫 방송 날짜인 '2026년 4월 13일(월) 밤 10시 40분'을 명시하여 실제 홍보 배너로서의 기능을 완성했습니다.

수정 1 -> 2 -> 3

3. 주요 작업 포인트: 감성과 가독성의 조화

(1) 실루엣을 활용한 스토리텔링 - 인물의 디테일한 이목구비 대신 독보적인 피지컬 실루엣만을 노출하여 '누구나 알 수 있지만 확인하고 싶은' 팬심의 심리를 디자인에 녹였습니다.

(2) 타이포그래피의 변주 - 단순한 폰트 나열이 아니라, '감사한 밤'이라는 제목에 맞춰 부드러운 고딕 계열을 사용하고 포인트 아이콘을 삽입했습니다. 특히 노란색 포인트 컬러를 적절히 배치해 시선이 '제목 -> 주파수 -> 일시' 순으로 자연스럽게 흐르도록 설계했습니다.

(3) 밤하늘의 질감과 조명 - 단색 배경이 아닌 은은한 그라데이션과 텍스처를 활용해 눈이 편안하면서도 고급스러운 분위기를 연출했습니다. 캐릭터 실루엣 외곽에 얇은 라인을 추가해 배경과 인물을 확실히 분리했습니다.

마치며

이번 <박보검의 감사한 밤> 배너 작업은 '정보를 어떻게 단계별로 노출할 것인가'에 대한 고민을 할 수 있었던 유익한 과정이었습니다.

디자이너로서 단순히 예쁜 결과물을 만드는 것을 넘어,

타겟(팬층)의 문화를 이해하고 그들이 즐길 수 있는 요소를 배치하는 감각의 중요성을 다시 한번 배울 수 있었습니다.

[Web Project Report] MathHub UX/UI 리디자인

danmi01 — Sun, 12 Apr 2026 14:55:09 +0900

"환경에 구애받지 않는 양질의 수학 교육을 위하여"

방치된 정보의 나열에서 학습자 중심의 시스템으로, MathHub의 정체성을 재정립한 팀 프로젝트

기존 mathhub 링크 : https://mathhub.io/

1. Diagnosis & Leadership: 프로젝트의 시작

프로젝트 전반의 혼선을 방지하고 효율적인 협업을 위해 시스템의 기틀을 마련함.

디자인 시스템 선구축: 팀원 간 디자인 파편화를 방지하기 위해 리디자인 방향성을 설정하고 디자인 가이드를 최우선으로 정립.
정체성 혼란 해결: 중구난방이던 카테고리를 '국내 중·고등학생' 중심으로 재편하고, 글로벌 자료는 별도 섹션으로 분리하는 전략 수립.
UI 불친절 개선: 기계적인 나열에서 벗어나 학습자의 미감과 편의를 고려한 UX 전략 제시.

2. My Contributions: 주요 수행 업무

팀의 중심에서 전체 흐름을 조율하는 동시에, 학습 경험의 핵심인 이론(개념) 파트의 설계를 전담함.

2.1 이론 리스트 및 개념 학습 페이지 디자인

이론 리스트: 초기 카드형의 시각적 피로도를 해결하기 위해 일자형 리스트로 선회. 폰트 위계 강화 및 검색 기능을 추가해 접근성 극대화.
개념 학습 페이지: 학습 흐름을 끊지 않도록 UI를 배치하고, 정답 숨기기 토글 등 실질적인 학습 보조 기능을 구현.

2.2 프리젠테이션

발표 자료 제작 및 스피커: 프로젝트의 논리적 근거(문제 진단, 벤치마킹, 기대 효과)를 담은 최종 발표 자료를 제작하고 직접 발표를 진행함.

3. Design Guideline (Standardized for Team)

협업의 효율을 높이기 위해 팀원과 정립한 가이드라인.

Color System

Point Blue (#2C4578): 주요 버튼(CTA)과 핵심 포인트 요소에 사용
LIght Blue (#C5DCFF): 사이트의 전체적인 배경과 메인 톤을 담당
Blue Green (#31BCEB): 글로벌 페이지 컬러
Back Gray (#999999): 기본 선(Border)과 보조 텍스트에 사용

Typography (Pretendard)

UI Principles

모든 요소에 Border Radius 10px 적용 및 Chevron 스타일 아이콘 통일로 브랜드 일관성 유지.

4. Responsive & Expected Effects

모바일 최적화: 터치 오작동 방지 및 텍스트 시인성 확보를 위한 UI 조정.
기대 효과:
- 협업 효율 향상: 디자인 가이드 준수로 작업물 통합 시간 단축.
- 학습 몰입도 강화: 정돈된 UI와 학습 보조 기능으로 플랫폼 신뢰도 상승.

결과보고서

https://docs.google.com/presentation/d/1IBzwV5jGWABh4qam55XnBMvs4s5KNVEm_VbyJ9a7MG4/edit?usp=sharing

mathhub 리디자인 결과보고서

이 브라우저 버전은 더 이상 지원되지 않습니다. 지원되는 브라우저로 업그레이드하세요.

docs.google.com

메인페이지

이론리스트/ 이론 페이지

기출문제 다운 / 문제집 추천

글로벌 페이지

[Poster Design] 어도비 파이어플라이로 만든 ‘치즈베이글’ 포스터 제작기

danmi01 — Sun, 12 Apr 2026 14:07:50 +0900

안녕하세요, 디자인 공부하는 단미입니다. 지난 포스터 작업에 이어 이번에는 식욕을 자극하는 푸드 그래픽 작업을 진행해 봤습니다. 이번 작업의 주인공은 흘러내리는 치즈가 일품인 '치즈베이글'입니다.

어도비 파이어플라이(Adobe Firefly)를 활용해 상상 속의 완벽한 비주얼을 뽑아내고, 이를 배너 포스터로 완성하는 과정을 기록해 둡니다.

1. 디자인 모티브 및 기획: '치즈가 폭포처럼 쏟아지는 순간'

컨셉: 제목 그대로 'The Great Cheese-Fall'. 치즈가 폭포처럼 흘러내리는 압도적인 비주얼을 시각화하는 것이 목표.
컬러 전략: 치즈의 노란색과 보색 관계에 있는 딥 블루(Deep Blue)를 배경색으로 설정. 대비를 극대화해 시선을 한 번에 사로잡도록 기획함.

2. 푸드 이미지의 실사화: AI로 만든 '완벽한 한 입'

이번 작업의 핵심은 실제 사진보다 더 먹음직스러운 치즈의 질감을 파이어플라이로 구현한 것임.

프롬프트 포인트: 'Melting cheddar cheese', 'Dripping', 'Golden brown toasted bagel', 'Crispy bacon', 'High-contrast studio lighting'.
이미지 분석: 베이글 사이에서 터져 나오는 치즈의 볼륨감과 번들거리는 질감을 강조함. 특히 베이글의 거친 표면과 대비되는 치즈의 매끄러운 곡선이 잘 표현되도록 유도함.
디테일 수정: 생성된 이미지에서 베이글의 구워진 정도와 베이컨의 배치를 조정하여 가장 '맛있어 보이는' 구도를 확보함.

A high-resolution, close-up photograph of a bountiful, paper-wrapped bagel sandwich, 
sliced in half and positioned centrally against a solid, vibrant cobalt blue background.
The golden-brown, toasted bagel is held together in a crumpled parchment or kraft paper wrap.
The exposed cross-section reveals an abundance of molten, golden-yellow cheddar cheese,
dramatically and copiously melting and dripping in heavy, 
thick rivulets from the top half down onto the bottom half of the bagel. 
Below the rich, flowing cheese, a layer of crispy, well-cooked bacon strips is clearly 
visible, resting on a thick, soft fried egg or scrambled egg patty. 
The texture of the porous bagel, the crisp bacon, the soft egg, and the rich, 
glossy cheese are all hyper-detailed. The melting cheese is the central focus. Natural,
warm studio lighting highlights the textures. The perspective is frontal and direct.

3. 주요 작업 포인트: 타이포그래피 위계와 조화

강력한 이미지에 밀리지 않도록 텍스트의 위계(Hierarchy)를 잡는 데 집중함.

① 메인 타이틀 (The Great Cheese-Fall)

가장 강조되어야 할 요소. 두껍고 단단한 SB Aggro 체를 사용해 무게감을 줌.
치즈를 연상시키는 옐로우 계열 컬러를 적용해 이미지와의 통일감을 높임.

② 서브 카피 (Cheese, Crispy Bacon, and Pure Bliss)

딱딱한 메인 타이틀과 대비되도록 리드미컬한 필기체(Brittany Signature)를 선택.
레드 컬러를 사용해 자칫 단조로울 수 있는 블루-옐로우 조합에 강렬한 포인트 점을 찍음.

③ 정보 텍스트 (LUNCH MENU)

상단에 작게 배치하되, AppleMyungjo 체를 사용해 전체적인 디자인에 안정감과 고급스러움을 더함.

마치며

이번 작업은 '가장 강력한 이미지 하나'를 위해 AI를 어떻게 활용할 것인가, 그리고 그 이미지를 '디자인적으로 어떻게 뒷받침할 것인가'를 고민해 본 과정이었음.

단순히 멋진 이미지를 뽑는 것에 그치지 않고, 폰트의 크기와 굵기, 컬러 대비를 통해 사용자의 시선이 [이미지 -> 타이틀 -> 카피] 순으로 자연스럽게 흐르도록 구성하는 재미가 있었음. 역시 디자인의 완성은 한 끗 차이의 위계 설정에 있다는 걸 다시 체감함.