AI Agent로 제품 웹사이트와 SaaS 랜딩 페이지 디자인하기
디자인 방법 없이 AI Agent에 랜딩 페이지를 요청하면 거의 항상 같은 템플릿이 나옵니다. 빛나는 eyebrow pill, 그라디언트 슬로건, 같은 너비의 기능 카드 세 장입니다. 좋은 제품 웹사이트는 제품의 실제 차별점을 첫 화면에서 작동하는 요소로 만들고 코드를 확정하기 전에 서로 다른 시각 방향을 비교합니다.
핵심 요점
- 첫 화면에서 세 가지 질문에 바로 답하게 하세요. 제품이 무엇인지, 대안과 어떻게 다른지, 방문자가 지금 무엇을 시도하거나 클릭할 수 있는지입니다.
- 하나의 브리프도 완전히 다른 분위기를 만들 수 있습니다. 갤러리의 Orvo 랜딩 페이지 아홉 개에서 동일한 가격과 기능이 어떻게 각기 다른 편집적 개성을 갖는지 살펴 보세요.
- 제품 사진이 없다면 스톡 사진을 건드지 말고 Atelier Volders와 Fonderie Mercier처럼 인터랙티브 구성기, 소리나 서체 표본, 제작 과정 타임라인으로 신뢰를 구축하세요.
- 데스크톱에서는 1440×900에 맞춰 전개를 디자인한 다음 390px 모바일 뷰포트에서 제목 줄 바꿈, 가격표 가독성, 탭 대상을 확인하세요.
npx skills add oil-oil/oil-ui/ko/inspiration/web-design/ 컬렉션에서 40개 이상의 작동하는 웹사이트와 프롬프트를 살펴 보세요.
기본 AI 랜딩 페이지가 서로 비슷해 보이는 이유
프롬프트가 “내 AI 스타트업을 위한 모던한 랜딩 페이지를 만들어 줘”뿐이라면 모델은 레이아웃의 기준으로 삼을 도메인 자료가 없습니다. 결국 어두운 자주색 그라디언트, 떠 있는 pill 배지, “빠름 / 스마트 / 안전”이라고 적힌 카드 세 장, 지어낸 백분율 강조처럼 안전한 기본값에 의존합니다.
Oil UI 갤러리의 웹사이트와 비교해 보세요. Fieldwork Type은 편집 가능한 라이브 서체 테스트와 라이선스 계산기를 히어로에 바로 배치합니다. Fonderie Mercier는 방문자가 지름이 다른 청동 종을 두드리고 배음 감쇠 곡선을 본 뒤 주조 일정을 예약하게 합니다. Orvo는 제품을 출시해 본 사람의 안내와 token 결제 대신 정액 월 요금이라는 두 가지 구체적인 사실을 페이지의 중심에 둡니다.
| 섹션 | 기본 AI 템플릿 습관 | Oil UI 접근 방식(갤러리 사례 포함) |
|---|---|---|
| 히어로 섹션 | Eyebrow pill + 모호한 슬로건 + 버튼 두 개 + 추상적인 도형 | 명확한 포지셔닝 + 작동하는 제품 화면 또는 라이브 인터랙티브 표본 |
| 기능 | 일반적인 선 아이콘을 단 동일한 라운드 카드 세 장 | 작업 중심 설명(예: 6주 목공 타임라인, 음향 조율 표) |
| 가격 및 예약 | 등급 차이가 불분명한 체크 표의 나열 | 구체적인 등급(실시간 결제 전환이 있는 $0 / $24.99 / $34.99) 또는 배치 가능 수량 |
| 사진이 없을 때 | 관계없는 스톡 이미지나 어울리지 않는 AI 일러스트 | 강한 타이포그래피, 기술 도면, 마감 전환기, 촉감이 느껴지는 색상 팔레트 |
하나의 브리프에서 여러 방향 탐색하기
갤러리에는 완전히 같은 브리프로 만든 여러 완성작이 남아 있습니다. 모든 Orvo 랜딩 페이지는 대화형 앱 생성, 사람 전문가의 안내, 100개 이상의 템플릿, Starter $0 / Pro $24.99 / Unlimited $34.99 가격과 연간 결제 20% 할인이라는 같은 사실을 공유합니다.
그러나 Orvo · Launch Garden은 제품을 밝고 모듈화된 재배 공간으로 표현하고, Orvo · Tandem은 사람과의 협업을 강조하며, Orvo · Coastal Workshop과 Open Creative Studio는 완전히 다른 타이포그래피와 공간 리듬을 탐구합니다. Oil UI에서는 Agent가 먼저 나란히 놓인 비교 보드를 생성하므로 세부 사항을 다듬기 전에 브랜드에 맞는 방향을 선택할 수 있습니다.
실제 완성도를 만드는 랜딩 페이지 프롬프트 템플릿
제품이 어떻게 작동하는지, 가격이 어떻게 구성되는지, 방문자가 페이지에서 무엇을 조작할 수 있는지에 프롬프트의 초점을 맞추세요.
Oil UI를 사용해 [제품 이름]의 공식 랜딩 페이지를 디자인하고 구현해 줘(1440×900 데스크톱 뷰포트, 너비 390px까지 반응형).
- 제품 및 사용자: [누가 사용하며 어떤 일을 완수하는지 1~2문장으로 설명]
- 실제 차별점 두 가지: [예: 1) 크레딧 결제 대신 정액 월 구독, 2) 라이브 인터랙티브 미리보기 또는 전문가 검토]
- 필수 섹션 및 실제 수치:
1. 히어로: 명확한 포지셔닝과 인터랙티브 [테스트 / 계산기 / 라이브 워크플로 미리보기]
2. 기능: [구체적인 사용 사례 또는 템플릿 카테고리 3가지] 보여 주기
3. 가격: [정확한 등급 이름과 가격, 작동하는 월간/연간 전환]
4. 마무리 행동 유도.
- 에셋 제약 조건: [제품 사진이 있는지 명시하고, 없다면 타이포그래피, 레이아웃, 맞춤 벡터/canvas 그래픽에 의존].
최종 페이지를 만들기 전에 서로 다른 시각 방향 3가지를 나란히 제안해 줘.SaaS 제품, 개발자 도구, 하드웨어 출시, 독립 스튜디오에 두루 사용할 수 있습니다.
작동하는 갤러리 사례와 프롬프트
1440px 또는 390px의 실제 데모를 열어 모델과 프롬프트가 최종 인터페이스를 어떻게 형성했는지 살펴 보세요.
Fieldwork Type
독립 폰트 파운드리
독립 폰트 파운드리의 웹사이트를 만드세요(1440×900에서 시작해 너비 390까지 반응형으로 대응). 첫 화면에는 대표 서체를 배치하고, 방문자가 직접 텍스트를 입력하며 크기, 두께, 너비를 조절할 수 있어야 합니다. 아래에는 패밀리의 웨이트 차트, 문자 세트, 활용 사례와 용도별 라이선스(데스크톱, 웹, 앱)를 배치하고 장바구니에 담을 수 있게 하세요. 서체 테스터와 라이선스 선택 도구가 이 작품의 핵심입니다. 입력에 따라 서체 표본이 바뀌고, 옵션을 고를 때마다 라이선스 가격이 갱신되어야 합니다. 첫 화면, 테스터 패널이 펼쳐진 상태, 라이선스 선택 화면을 디자인하세요.
작품과 프롬프트 살펴 보기 →
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단계 주조 과정, 냉간 각인 크라운 기록, 금요일 오픈 시간을 살피고 다음 월간 주조를 위한 예약 전표를 준비할 수 있어야 합니다. 제품 사진은 제공되지 않습니다.
작품과 프롬프트 살펴 보기 →
Routewise
AI API 플랫폼 웹사이트
OpenRouter와 비슷한 AI 모델 API 통합 플랫폼의 웹사이트를 만드세요(1440×900에서 시작해 너비 390픽셀까지 반응형 대응). 중국 개발자를 위한 중국어 인터페이스로 하나의 API 키로 수십 개 제공사의 수백 개 모델에 접근하고 통합 결제, 자동 페일오버, 가격 또는 지연 시간 기반 라우팅을 제공합니다. 제공사와 모델명은 가상이지만 실제처럼 그럴듯해야 합니다. 독창성을 최우선으로 하세요. 어두운 그라디언트와 코드 블록이 있는 또 다른 AI 웹사이트를 만들지 마세요. 핵심은 라우팅을 보이게 하는 것입니다. 요청이 코드에서 출발해 제공사로 라우팅되고 제공사가 실패하면 자동으로 백업으로 전환되며 가격과 지연 시간이 즉시 보여야 합니다. 모델 마켓플레이스는 제공사, 컨텍스트 길이, 가격별 필터링과 비교를 지원합니다. 첫 화면, 모델 마켓플레이스의 필터링 및 비교, 요청의 라우팅 및 페일오버 과정의 세 가지 상태를 디자인하세요.
작품과 프롬프트 살펴 보기 →표현력 있는 표면과 고배율 QA를 위해 Oil UI Pro 사용
웹사이트에 맞춤 SVG 빛의 궤적, 도트 매트릭스, 흐르는 그라디언트, 19가지 전문 카드 및 공간 확장 프로토타입, 100%와 200% 확대에서 여러 차례 진행하는 블라인드 리뷰가 필요하다면 Oil UI Pro로 업그레이드하세요.
npx github:oil-oil/oil-cli install oil-ui-pro자주 묻는 질문
제품 사진이 없을 때 랜딩 페이지를 설득력 있게 만들려면 어떻게 해야 하나요?
실제 도메인 로직의 한 부분을 페이지에서 조작 가능한 표본으로 만드세요. Atelier Volders에서는 방문자가 32 cm, 45 cm, 62 cm 오크 스툴과 세 가지 목재 마감을 전환하고 Fonderie Mercier에서는 종의 주파수를 들어 봅니다. 둘 다 스톡 사진을 사용하지 않습니다.
랜딩 페이지는 다크 모드와 라이트 모드 중 무엇이 좋나요?
매체와 주제에 맞추세요. 저수준 런타임(Archon)이나 천문 시계(Chronos)는 어두운 표면이 어울리고, 대부분의 SaaS 제품, 폰트 파운드리, 공예품 상점은 따뜻한 종이나 자연광 배경에서 더 편하게 읽힙니다.
랜딩 페이지의 모바일 버전은 어떻게 확인해야 하나요?
실제 브라우저에서 페이지를 390×844로 여세요. 큰 제목이 어색하게 한 단어만 남도록 줄 바꿈되지 않는지, 히어로의 인터랙티브 컨트롤을 터치로 사용할 수 있는지, 가격 등급이 가로 스크롤 잘림 없이 깔끔하게 쌓이는지 확인하세요.
Oil UI 갤러리에서 데스크톱과 스마트폰 뷰포트를 전환할 수 있나요?
네. 갤러리의 모든 웹 작품에는 하단 표시줄에 뷰포트 전환이 있어 1440px 데스크톱 레이아웃과 390px 모바일 레이아웃을 실제로 살펴 볼 수 있습니다.