Yetter 브랜딩 구축기 (2) − 모델 카드 UI 개편
Yetter 브랜드 아이덴티티를 모델 카드 UI에 적용한 과정. 생성형 AI 프롬프트 제작부터 카테고리 시스템, 정보 위계 개편까지 공유합니다.
Jan 12, 2026
지난 편에서는 내부 설문부터 로고 제작까지, Yetter의 브랜드 아이덴티티를 구축한 과정을 소개했습니다.
브랜딩은 로고를 만드는 것으로 끝나지 않습니다. 유저가 마주하는 모든 서비스 접점에 일관된 언어를 적용할 때 완성됩니다. 이번 편에서는 정의된 브랜드 아이덴티티를 유저 탐색의 시작점인 모델 카드에 어떻게 적용했는지 소개합니다.
모델 카드는 단순한 UI 요소가 아닙니다. 유저가 수십 개의 모델 중 최적의 도구를 선택하도록 돕는 핵심 인터페이스입니다. 모델 수가 점차 늘면서 기존 디자인에서 개선이 필요한 부분들이 보이기 시작했습니다.
- 비주얼 정체성 부족: 모델 썸네일들이 각기 다른 톤앤매너로 제작되어 Yetter만의 일관된 느낌을 주기 어려웠습니다.
- 카테고리 파악의 어려움: 모델 수가 많아질수록 텍스트만으로는 어떤 타입의 모델인지 한눈에 파악하기 힘들었습니다.
- 정보 우선순위 변화: 같은 계열 모델이 늘면서 이미지 중심의 구분 방식보다, 명확한 모델명 텍스트 정보가 더 중요해졌습니다.
Step 1. 시각적 브랜딩 정립: AI를 디자인 파트너로 활용하기
모델 썸네일은 Yetter라는 브랜드의 첫인상을 결정하는 가장 강력한 시각 요소입니다.
이전에는 규격화된 가이드가 없어서 모델이 추가될 때마다 "이번엔 어떤 느낌으로 만들지?"라는 고민이 반복되었습니다. 이 고민을 해결하기 위해, 누가 제작하더라도 Yetter의 정체성이 일관되게 드러날 수 있도록 집중했습니다.
1) Yetter만의 공통 프롬프트 만들기
모델 썸네일을 제작하는 것은 단순히 '예쁜 이미지'를 찾는 것이 아니라, Yetter의 브랜드 언어를 시각화할 수 있는 프롬프트의 핵심 요소를 추출하는 작업이었습니다.
- 탐색과 수집: 미드저니(Midjourney)의 익스플로어 탭에서 서비스 지향점에 부합하는 레퍼런스들을 수집했습니다.
- Gemini와의 협업: 수집된 이미지들의 프롬프트 데이터를 Gemini에게 학습시키고, Yetter의 핵심 브랜딩 키워드(신뢰, 첨단, 명료함)와 결합해 최적의 프롬프트 요소를 도출했습니다.
- 반복적인 고도화: 처음부터 완벽한 프롬프트는 없었습니다. 약 14개 모델의 썸네일을 제작하며 생성 데이터를 누적했고, "이전 이미지와 통일성을 높여줘"라는 피드백을 반복하며 프롬프트를 점진적으로 다듬었습니다.
이렇게 Yetter만의 프롬프트 공식이 완성되었습니다.
Photorealistic masterpiece, 8K resolution, cinematic composition. High-contrast lighting employing either brilliant natural daylight or cool-toned artificial light (fluorescent, cool white), ensuring extreme sharpness and clarity. The color grading heavily emphasizes a cool palette with deep blues, teals, and cyan accents, creating a sophisticated and distinct atmosphere. Whether the aesthetic is clean minimalist or retro analog film look (grain, texture), there is a strong emphasis on rendering physical textures with extreme realism and detail.
포토리얼리스틱 걸작, 초고화질(8K), 시네마틱 컴포지션. 밝고 강렬한 자연광 또는 차가운 톤의 인공 조명(형광등, 쿨 화이트)을 사용하여 명암 대비가 뚜렷하고 선명함. 전체적인 컬러 팔레트는 깊은 파란색, 청록색(Teal), 시안(Cyan) 등 차가운 색감을 강조하여 세련되고 명료한 분위기를 연출. 깨끗하고 미니멀한 현대적 미학이거나 레트로한 아날로그 필름 룩(그레인, 질감)이더라도, 대상의 물리적 질감을 극도로 사실적이고 섬세하게 표현하는 데 중점을 둠.
이 프롬프트의 핵심은 세 가지입니다.
쿨톤 컬러 팔레트(블루, 틸, 시안), 명암 대비가 뚜렷한 조명, 그리고 극사실적인 질감 표현입니다.
이 프롬프트를 사용해 Qwen-image 모델로 텍스트 해보자면 결과는 다음과 같습니다.
왼쪽은 키워드 하나만 넣고 돌린 것이고, 오른쪽은 공통 프롬프트만 더해 제작한 이미지입니다. 어떤가요? 확실히 공통 프롬프트를 사용하니 Yetter의 메인 컬러가 명확하게 드러납니다.
2) 텍스트를 이미지에 자연스럽게 녹이기
텍스트가 이미지 속에 자연스럽게 녹아들게 하려면, 텍스트를 단순한 '글자'가 아니라 물리적인 '객체(Object)'나 '질감(Texture)'으로 인식하게끔 프롬프트를 구성해야 합니다.
중요한 것은 텍스트가 '어디에' '어떻게' 쓰였는지, 또한 '주변 환경과 어떻게 상호작용'하는지입니다. 예를 들어 기존에는 'Add "Qwen-image" text'라고만 입력했던 것을 다음과 같이 변경했습니다.
기존: Add "Qwen-image" text
변경: A snow-covered scene with pure white, smooth, and even snow stretching across the entire ground and surroundings, featuring naturally embedded "Qwen-image" text resembling a bear's footprint on the snow surface.
확실히 구체적으로 묘사하니 의도한대로 단순히 이미지 위에 텍스트 레이어가 출력된 형태가 아니라, 이미지 속에 자연스럽게 녹아든 이미지가 나옵니다. 하지만 매번 새로운 배경과 표현 방식을 고민하는 건 비효율적이었기 때문에, 반복적으로 참고할 수 있는 가이드까지 정리했습니다.
1. '어디에' 쓰였는가? (매체와 표면의 정의)
텍스트가 존재할 물리적 기반을 명확히 합니다.
나쁜 예: "A photo of a cafe with text 'COFFEE TIME'."
(카페 사진에 'COFFEE TIME' 텍스트)
좋은 예: "A rustic wooden sign hanging above a cafe entrance, with 'COFFEE TIME' carved into the wood."
(카페 입구 위에 걸린 투박한 나무 간판, 'COFFEE TIME'이 나무에 새겨져 있음)
2. '어떻게' 쓰였는가? (적용 방식과 질감)
텍스트가 표면에 어떻게 적용되었는지를 묘사하면 질감이 살아납니다.
- 페인트/낙서: Spray-painted graffiti, hand-painted with visible brush strokes, stenciled letters
- 조각/엠보싱: Carved into stone, embossed leather, etched glass
- 빛: Glowing neon tubes, backlit channel letters
- 기타: Embroidered patch, chalk on a blackboard
3. '환경과 어떻게 상호작용'하는가? (조명, 그림자, 원근감)
텍스트가 주변 환경의 영향을 받아야 진짜처럼 보이기 때문에, 주변 환경과의 상호작용 역시 고려해야 합니다.
- 조명과 그림자: 텍스트 자체가 빛을 내거나 다른 빛을 받아 그림자가 생겨야 합니다.
예: "...neon sign 'OPEN' casting a red glow onto the wet brick wall."
예: "...raised metal letters 'BANK' casting long shadows in the afternoon sun."
- 원근감과 굴곡: 텍스트가 놓인 표면의 형태를 따라가야 합니다.
예: "...text 'FRESH MILK' wrapping around the curve of a glass bottle."
4. '완벽하지 않음'을 추가 (마모와 손상)
현실 세계의 텍스트는 완벽하게 깨끗하지 않아서, 출력하고자 하는 이미지의 무드에 따라 약간의 결함 요소까지 추가하면 더욱 사실적으로 표현됩니다.
키워드: Faded, chipped paint, rusted metal, slightly smudged chalk, dusty, rain-streaked
아이디어가 잘 떠오르지 않을 때는 위 가이드를 Gemini나 ChatGPT에 첨부해 아이디어를 구하는 것도 좋습니다. 이미지를 제작할 때 가장 중요한 것은 제작하는 사람이 원하는 이미지가 무엇인지 명확히 알고 있어야 한다는 점입니다. 생성형 AI를 활용하더라도 디자이너는 레퍼런스 리서치 과정을 여전히 필수로 거쳐야 합니다. 머릿속으로 원하는 형태와 오브젝트, 사진의 구도와 질감 및 색채 등을 꼼꼼하게 따져가며 제작한다면, 원하는 이미지를 더욱 빠르게 얻을 수 있습니다.
Step 2. 카테고리 시스템: 빠른 탐색을 위한 시각 설계
모델이 수십 개를 넘어 수백 개가 될 때, 유저는 가장 먼저 '내가 원하는 결과물의 형태'를 찾습니다.
텍스트만으로 모델의 성격을 파악하는 것은 인지 부하를 높이기 때문에, 시각적으로 빠르게 구분할 수 있는 시스템이 필요했습니다.
- 아이콘 기반 구분: 유저의 최종 목적지인 Output 타입(이미지, 비디오, 텍스트 등)을 기준으로 직관적인 아이콘을 부여했습니다.
- 컬러 구분: Input 데이터의 종류에 따라 컬러 토큰을 대응시켜, 시각적 피로도를 낮추면서도 논리적인 분류가 가능하도록 개선했습니다.
Step 3. 정보 위계 재정립: 이미지 중심에서 '식별 중심'으로
이번 개편의 가장 핵심적인 변화는 시선의 흐름(Visual Hierarchy)을 재설계한 것입니다.
UI적으로는 미세한 변화처럼 보일 수 있지만, 유저 경험 측면에서는 큰 전환점입니다.
구분 | 기존 위계 (Image-First) | 개선 위계 (Info-First) |
순서 | 이미지 → 타이틀 → 설명 → 카테고리 | 카테고리 → 타이틀 → 설명 → 이미지 |
핵심 가치 | 이미지로 모델 구분 | 모델의 정확한 식별과 목적 확인 |
모델 수가 적을 때는 이미지만으로 구분이 가능하지만, 만약 모델이 수십, 수백 개로 확장될 수도 있다는 점을 고려한다면 텍스트 정보의 가독성이 최우선입니다. 특히 모델명에 구체적인 정보가 없는 모델을 고려해, 카테고리 뱃지를 최상단에 배치해 유저가 빠르게 목적에 맞는 모델을 찾을 수 있도록 했습니다.
마치며: 시스템으로서의 디자인
Yetter의 브랜딩은 내부 설문에서 시작해 로고와 컬러 시스템을 거쳐, 실제 제품인 모델 카드 개편까지 이어졌습니다. 서비스의 본질을 시각 언어로 번역하고, 유저가 마주하는 모든 접점에 이를 일관되게 적용하는 과정이었습니다.
특히 모델 카드 작업을 하며 생성형 AI를 본격적으로 활용했는데, 이 과정에서 디자이너의 역할이 어떻게 달라지고 있는지 체감할 수 있었습니다. 이제는 직접 모든 것을 그리기보다, AI가 브랜드 의도대로 결과물을 만들어낼 수 있도록 정교한 프롬프트와 가이드를 설계하는 것이 핵심이 되었습니다.
브랜딩부터 실제 UI까지, yetter.ai에서 직접 경험해보세요!
Share article