나란히 놓는 HTML 스타일 비교와 한 번의 UI 프롬프트
AI Agent에 인터페이스 초안 하나를 요청하는 것은 디자이너에게 스케치 한 장만 요청하는 것과 같습니다. 다른 타이포그래피 크기, 공간 리듬, 표면 톤이 제품에 더 적합할지 판단할 방법이 없습니다. Oil UI의 핵심 습관은 전체 애플리케이션 상태를 만들기 전에 실제 제품 문구를 사용해 진정으로 다른 방향 3~4개를 나란히 배치한 HTML 비교 보드를 생성하는 것입니다.
핵심 요점
- 좋은 판단에는 비교가 필요합니다. 1440px 또는 390px에서 서로 다른 방향 3가지를 나란히 볼 때 강한 위계와 약한 습관이 즉시 명확해집니다.
- 실제 방향은 버튼 색상만 바꾸는 것이 아니라 공간 구성, 타이포그래피 개성, 표면 밝기, 핵심 컨트롤에서 차이가 납니다.
- 선정된 방향이 있으면 탈락한 옵션의 어울리지 않는 조각을 이어 붙이는 대신 그 시스템에 온전히 집중하세요.
- 갤러리에는 Orvo 페이지 아홉 개, Atelier Volders 페이지 세 개, Fonderie Mercier 페이지 세 개 등 동일한 브리프로 만든 완전한 다방향 시리즈가 있습니다.
npx skills add oil-oil/oil-ui무료 Skill의 기본 제공 HTML 비교 보드는 데스크톱과 모바일 뷰포트에서 모두 작동합니다.
초안 하나만 요청하는 방식이 국소 최적해에 갇히는 이유
Agent가 화면 하나만 생성하면 자연스럽게 가장 안전한 통계적 평균을 선택합니다. “더 과감하게 해 줘” 또는 “다크 모드를 시도해 줘”라고 답하면 Agent는 같은 기본 골격을 덧대는 정도에 그쳐 간격과 대비가 흐려지는 경우가 많습니다.
먼저 나란히 배치한 비교 보드를 생성하면 보조 상태에 token을 투자하기 전에 디자인 가능성을 넓힐 수 있습니다. 모든 후보 방향은 자리 표시용 lorem ipsum 대신 실제 제품 이름, 실제 가격 등급, 실제 인터랙티브 주제를 사용합니다.
| 제품 및 공유 브리프 | 방향 A | 방향 B | 방향 C 및 추가 변형 |
|---|---|---|---|
| Orvo(AI 웹사이트 빌더, 월 $0 / $24.99 / $34.99, 사람 전문가의 안내) | Launch Garden (orvo-garden): 모듈식 재배 리듬을 갖춘 밝은 라임 캔버스 | Tandem (orvo-tandem): 사람과의 협업을 강조하는 따뜻한 편집용 종이 | Coastal Workshop (orvo-coast), Open Creative Studio (orvo-studio), The Launch Line (orvo-launch) 및 4개 추가 |
| Atelier Volders(24개 배치로 다리 3개짜리 오크 스툴 하나를 만드는 겐트 목공방) | Grain & Tenon (volders-grain): 3년 자연 건조 목재의 나이테와 목공 접합에 집중 | River Timber (volders-hearth): 따뜻한 벽난로 곁의 스케일과 Korenlei 공방 이야기 | The Wedged Oak (volders-wedge): 기술적인 목공 절단도와 사양표 |
| Fonderie Mercier(매달 종 18개를 주조하는 가족 청동 종 파운드리) | Bronze, with a Voice (mercier-voice): 인터랙티브 배음 청취가 중심 | Eighteen Bells (mercier-pour): 월별 용광로 배치와 비문을 중심으로 구성 | The Tuning Sheet (mercier-bell): 절제된 음향 원장과 주파수 표기 |
세 가지 방향을 진정으로 다르게 만드는 요소
그대로 두면 모델이 똑같은 3열 그리드를 파란색, 초록색, 자주색으로 칠해서 보여 줄 수도 있습니다. Oil UI는 네 가지 구조적 축에서 방향을 벌립니다. Oil UI Pro는 여기에 명시적인 방향 중복 검사를 추가합니다.
- 첫 화면 구성과 진입점을 다르게 설정
- 방향 1은 강한 편집형 타이포그래피와 인라인 계산기로 시작하고, 방향 2는 인터랙티브 작업대로 바로 열리며, 방향 3은 비대칭 분할을 사용할 수 있습니다.
- 타이포그래피 개성과 크기 비율을 다르게 설정
- 한 후보에는 대비가 강한 편집용 세리프를 사용하고 다른 후보에는 깔끔한 그로테스크와 모노스페이스 표 숫자 시스템을 조합하세요.
- 표면 밝기와 밀도를 다르게 설정
- 따뜻한 종이, 선명한 자연광 화이트, 카테고리에 적합한 집중된 어두운 표면에서 실제 콘텐츠가 어떻게 읽히는지 테스트하세요.
- 선택 후에는 하나의 방향만 엄격히 유지
- 비교 보드를 깔끔한 선택 단계로 활용하세요. 방향 B를 선택하면 이후 모든 상태를 방향 B의 규칙 안에서 구축하고 방향 A의 위젯을 억지로 결합하지 마세요.
나란히 배치한 비교 보드를 만드는 프롬프트 템플릿
새 웹사이트, 앱 흐름, 대표 화면 리디자인을 시작할 때마다 이 프롬프트를 사용하세요.
Oil UI를 사용해 [제품 이름 및 카테고리]의 디자인 방향을 탐색해 줘.
- 실제 제품 콘텐츠: [머리글, 핵심 기능 3가지, 정확한 가격 또는 주요 도메인 필드 포함]
- 목표 뷰포트: [1440×900 데스크톱 / 390×844 모바일]
전체 프로덕션 상태를 만들기 전에 진정으로 다른 시각 방향 3가지를 담은 나란히 배치한 비교 보드를 생성해 줘. 실제 제품 콘텐츠를 사용하면서 히어로 구성, 타이포그래피 조합, 표면 톤을 서로 다르게 해 줘. 내가 하나를 선택하면 전체 흐름을 다듬을 거야.무료 Oil UI Skill과 Oil UI Pro에서 모두 기본 지원됩니다.
작동하는 갤러리 사례와 프롬프트
1440px 또는 390px의 실제 데모를 열어 모델과 프롬프트가 최종 인터페이스를 어떻게 형성했는지 살펴 보세요.
Atelier Volders · 나뭇결과 장부
수제 가구 공방 웹사이트
벨기에 겐트 Korenlei 14에 있는 2인 목공 공방 Atelier Volders의 웹사이트를 만드세요(1440×900에서 시작해 너비 390까지 반응형 대응). 영어 인터페이스를 사용합니다. 이 공방은 3년간 자연 건조한 목재를 손으로 선반 가공하고 쐐기를 박아 만든 세 다리 참나무 스툴 De Drievoet 단 한 가지만 제작하며, 매월 한 배치로 24개를 생산합니다. 세 가지 높이(32 cm 난로용 낮은 스툴 €240, 45 cm 식사 및 책상용 스툴 €270, 물푸레나무 발받침 링이 있는 62 cm 카운터 스툴 €310)와 세 가지 마감(비누로 문지른 원목 참나무, 훈증 다크 참나무, 끓인 아마인유와 밀납)을 제공합니다. 방문자는 높이와 마감을 실시간으로 전환하고 6주 제작 과정, 바닥면에 인두로 찍은 배치 인장, 토요일 오픈 시간을 확인하고 현재 배치의 스툴을 예약할 수 있어야 합니다. 제품 사진은 제공되지 않습니다.
작품과 프롬프트 살펴 보기 →
Atelier Volders · 강변 원목
수제 가구 공방 웹사이트
벨기에 겐트 Korenlei 14에 있는 2인 목공 공방 Atelier Volders의 웹사이트를 만드세요(1440×900에서 시작해 너비 390까지 반응형 대응). 영어 인터페이스를 사용합니다. 이 공방은 3년간 자연 건조한 목재를 손으로 선반 가공하고 쐐기를 박아 만든 세 다리 참나무 스툴 De Drievoet 단 한 가지만 제작하며, 매월 한 배치로 24개를 생산합니다. 세 가지 높이(32 cm 난로용 낮은 스툴 €240, 45 cm 식사 및 책상용 스툴 €270, 물푸레나무 발받침 링이 있는 62 cm 카운터 스툴 €310)와 세 가지 마감(비누로 문지른 원목 참나무, 훈증 다크 참나무, 끓인 아마인유와 밀납)을 제공합니다. 방문자는 높이와 마감을 실시간으로 전환하고 6주 제작 과정, 바닥면에 인두로 찍은 배치 인장, 토요일 오픈 시간을 확인하고 현재 배치의 스툴을 예약할 수 있어야 합니다. 제품 사진은 제공되지 않습니다.
작품과 프롬프트 살펴 보기 →
Atelier Volders · 쐐기로 맞춘 참나무
수제 가구 공방 웹사이트
벨기에 겐트 Korenlei 14에 있는 2인 목공 공방 Atelier Volders의 웹사이트를 만드세요(1440×900에서 시작해 너비 390까지 반응형 대응). 영어 인터페이스를 사용합니다. 이 공방은 3년간 자연 건조한 목재를 손으로 선반 가공하고 쐐기를 박아 만든 세 다리 참나무 스툴 De Drievoet 단 한 가지만 제작하며, 매월 한 배치로 24개를 생산합니다. 세 가지 높이(32 cm 난로용 낮은 스툴 €240, 45 cm 식사 및 책상용 스툴 €270, 물푸레나무 발받침 링이 있는 62 cm 카운터 스툴 €310)와 세 가지 마감(비누로 문지른 원목 참나무, 훈증 다크 참나무, 끓인 아마인유와 밀납)을 제공합니다. 방문자는 높이와 마감을 실시간으로 전환하고 6주 제작 과정, 바닥면에 인두로 찍은 배치 인장, 토요일 오픈 시간을 확인하고 현재 배치의 스툴을 예약할 수 있어야 합니다. 제품 사진은 제공되지 않습니다.
작품과 프롬프트 살펴 보기 →
Fonderie Mercier · 청동의 목소리
가족 청동 종 주조 공방 웹사이트
리옹의 손 강변 Quai Saint-Vincent 28에 있는 3대째 가족 종 주조 공방 Fonderie Mercier의 웹사이트를 만드세요(1440×900에서 시작해 너비 390까지 반응형 대응). 영어 인터페이스를 사용합니다. 구리 78% / 주석 22%의 종청동과 다져 만든 강모래 주형을 사용해 대표 작품 Le Bourdon de Table 한 가지만 주조합니다. 선반으로 정확한 음높이에 조율하며 매월 한 번 18개의 고정 로트로 생산합니다. 세 가지 크기와 음높이(Ø 72 mm 탁상종 A4 440Hz €180, Ø 96 mm 정원종 F#4 370Hz €240, 단조 철 브래킷이 있는 Ø 124 mm 벽종 D4 293.7Hz €340)와 세 가지 파티나 마감(선반 가공 생청동, 훈제 청동, 녹청)을 제공합니다. 방문자는 각 음높이를 듣고 크기와 마감을 전환하며 5단계 주조 과정, 냉간 각인 크라운 기록, 금요일 오픈 시간을 살피고 다음 월간 주조를 위한 예약 전표를 준비할 수 있어야 합니다. 제품 사진은 제공되지 않습니다.
작품과 프롬프트 살펴 보기 →Oil UI Pro: 방향 중복 검사와 다관점 리뷰
Oil UI Pro는 자동화된 방향 중복 검사로 피상적인 팔레트 교체를 방지하고 블라인드 서브에이전트 평가를 제공해 후보 방향을 전체 화면으로 확장하기 전에 검증하게 합니다.
npx github:oil-oil/oil-cli install oil-ui-pro자주 묻는 질문
나란히 배치한 HTML 비교 보드가 무료 오픈소스 Skill에도 포함되나요?
네. 무료 Oil UI Skill에는 데스크톱과 모바일 뷰포트를 모두 지원하는 나란히 배치한 비교 보드가 포함됩니다. npx skills add oil-oil/oil-ui로 설치하고 Agent에 서로 다른 디자인 방향을 제안하게 하세요.
한 번에 몇 가지 방향을 비교해야 하나요?
3~4가지가 적당합니다. 옵션 두 개는 너무 이분법적으로 느껴지는 경우가 많고 네 개를 넘으면 각 후보에 들이는 완성도가 흐려집니다.
방향 A의 팔레트와 방향 B의 레이아웃을 결합할 수 있나요?
선정된 레이아웃 골격에 일관된 색상 팔레트를 적용할 수는 있지만 서로 다른 방향의 개별 카드 스타일이나 타이포그래피 크기를 섞지는 마세요. Agent에 방향 A의 표면 팔레트를 방향 B의 레이아웃에 깔끔하게 적용하고 대비를 다시 확인하게 하세요.
다방향 탐색을 가장 잘 보여 주는 갤러리 작품은 무엇인가요?
Orvo 랜딩 페이지 아홉 개, Atelier Volders 공방 사이트 세 개, Fonderie Mercier 종 파운드리 사이트 세 개, 또는 짝을 이룬 Vesper, Sonar, Archon, Tempo 작품을 여세요. 브라우저 탭을 나란히 열고 비교하며 살펴 보기에 좋습니다. 작업 브리프가 수록된 작품에서는 프롬프트도 함께 확인할 수 있습니다.