시작하며
저는 스마트폰 앱 개발 첫탄으로, '스미네코(Sumineko)'라는, 스마트폰 구석에서 고양이 영상을 무한으로 랜덤하게 '딴짓하며 볼 수 있는(While-watching)' 아주 단순한 스마트폰 앱을 개발하고 있습니다.
스미네코 (개발 중)
이 앱을 공식 스토어에 등록하려면 개인정보 처리방침 페이지를 웹상에 마련해야 하는데, 기왕 하는 김에 **본 앱의 LP(랜딩 페이지)**를 만들기로 했습니다.
그래서 본 글에서는 LP의 토대를 대표적인 LLM이나 AI 코딩 서비스를 이용하여 작성하게 하고, 그 결과물을 독단과 편견으로 비교해 봅니다.
선수 소개
| 선수 | 특징 |
| v0（v0 Agent） | Vercel의 에이전트 도구. 프롬프트 하나로 UI 구현부터 디버깅까지 원스톱으로 지원. |
| bolt.new （Claude Sonnet 4.5） | 브라우저 기반 Claude 에이전트. Next.js 앱을 대화 형식으로 효율적으로 구축. |
| Lovable | 다중 AI 모델 대응 빌더. React+Supabase 앱을 직관적으로 생성 및 편집 가능. |
| Gemini 3.0 Pro | Google의 최신 고성능 모델. 멀티모달 입력으로 세련된 웹 페이지를 빠르게 생성. |
| Opus 4.5 | Anthropic의 최강 모델. 긴 컨텍스트를 활용해 복잡한 웹 앱 설계를 꼼꼼하게 처리. |
| GPT 5.2 | OpenAI 최신 모델. GPT-5.1 대비 '정답 도출률' 1.8배, '코드 정확성' 대폭 향상, 환각(Hallucination) 30% 감소. |
WARNING
편의상 동열 취급에 대하여
순수 LLM(Gemini 3.0 Pro, Opus 4.5, GPT 5.2)과 LLM을 내장한 개발 지원 시스템(bolt.new, v0, Lovable)은 시스템 아키텍처가 다릅니다만, 본 글에서는 편의상 같은 선상에서 다루며, 동일한 프롬프트로 웹 페이지를 생성한 결과물의 완성도를 주관적으로 비교하는 것을 목적으로 합니다. 따라서 본 실험에 엄밀성은 없으니 주의해 주십시오.
프롬프트
아래 2가지 패턴을 준비하여, 애드리브 능력 및 요구사항에 대한 충실한 대응력을 가볍게 검증합니다.
최소한의 요건만 기재한 오마카세 패턴
비교적 상세한 요건을 기술한 상세 지시 패턴
오마카세 패턴
주로 '스미네코'의 간단한 개요와 필요한 섹션만을 명시하고, 디자인이나 문구 등은 맡기는 패턴입니다.
# Landing Page Creation for "Sumineko" (Corner Cat)
## Request
Design and implement a landing page (Top page only) for the smartphone app "Sumineko".
**You have full creative freedom** regarding the layout, color palette, typography, and copywriting. Please build what you consider to be the **most attractive and modern** design for this product.
## Product Concept
- **App Name**: Sumineko (Corner Cat)
- **Core Value**: A "healing" app that lets users watch cat videos in a Picture-in-Picture (PiP) window while multitasking on their phone.
- **Vibe**: Relaxing, Minimal, Cute but sophisticated.
## Technical Stack
- Next.js 15 (App Router)
- Tailwind CSS
- TypeScript
- Lucide React (for icons)
## Essential Sections (Skeleton)
Please include the following three sections. The order and presentation are up to you.
### 1. Hero Section
- Create a catchy headline and sub-headline that conveys the app's appeal.
- Include "App Store" and "Google Play" buttons (UI only).
- Use a placeholder or CSS art for the main visual.
### 2. Experience / Demo Section (Critical Logic)
This section must adapt based on the user's device:
- **On Desktop (PC)**: Display a mock "Video Player" and a "Start Picture-in-Picture" button to let users simulate the experience in the browser.
- **On Mobile**: Display a message like "Experience the demo on PC" and guide them to the App Store buttons instead.
### 3. Collection Section
- Introduce the feature where users can "collect" the cats they have watched.
- visualize this "collection" aspect (e.g., a grid of cat placeholders, a list, etc.).
## Assets & Copy
- **No assets provided**: Use placeholders (e.g., `via.placeholder.com` or CSS shapes) for all images and videos.
- **Copywriting**: Please write engaging English copy for headings and descriptions based on the product concept.
## Goal
Surprise me with a high-quality, polished UI that balances "Healing/Cute" with "Modern Web Design."
상세 지시 패턴
'스미네코'의 개요나 필요한 섹션에 더해, 섹션별 상세 구성, 문구, 배색 등 디자인 측면까지 깊이 있게 지시한 패턴입니다.
# Landing Page Creation for "Sumineko" (Corner Cat)
## Project Overview
Create a landing page (Top page only) for the smartphone app "Sumineko" (Corner Cat), which allows users to watch cat videos in Picture-in-Picture (PiP) mode while multitasking. The PC browser version offers a free trial, while the smartphone version is a paid app.
## Assets
- **No assets are provided in advance.**
- Please use **placeholders** (e.g., solid colors, CSS patterns, or placeholder image services like `via.placeholder.com`) for all images, icons, and videos.
- Assume the file paths for images will be logically placed in `/public/images/` for future replacement, but use placeholders for now.
## Technical Requirements
- **Framework**: Next.js 15 (App Router)
- **Styling**: TailwindCSS
- **Language**: TypeScript
- **Deployment**: Targeted for Cloudflare Pages
- **i18n**: Foundation for multi-language support required (manage text in JSON files).
- Create the **English** version as the default.
- **Code Quality**: Ensure components are modular and reusable. Avoid monolithic files.
- **Images**: Use standard `<img>` or Next.js `<Image>` with placeholder sources.
- **Videos**: Lazy loading implementation (Intersection Observer).
- **Fonts**: System fonts or optimized Fonts (e.g., Inter or a rounded font for a soft look).
## Environment Variables
Assume the following environment variables are used:
- `NEXT_PUBLIC_STORE_MODE` - Values: `coming-soon` or `live`
- `NEXT_PUBLIC_APP_STORE_URL` - URL for App Store
- `NEXT_PUBLIC_GOOGLE_PLAY_URL` - URL for Google Play
## Color Palette
- **Background**: #FAF8F5 (Warm off-white)
- **Main Text**: #8B7355 (Brownish)
- **Accent**: Add a soft, harmonious color if necessary.
## Design Guidelines
- Minimal and clean.
- Focus on "what we want to show the user" in each section.
- A soft, healing atmosphere suitable for a cat app.
- No header required.
---
## Page Structure
### 1. Top Page (`/`)
#### Section 1: Hero
**Layout**: 2 columns (Text on Left, Video on Right).
**Left Side:**
- **Mascot Image**: Use a placeholder.
- **Catchphrase**: "Cats in the Corner of Your Screen."
- **Sub-copy**: "Just open and play. Infinite cat videos for your multitasking moments."
- **3 Selling Points (Use icons for visual appeal):**
1. **"Instant Comfort"** - One tap to play. No searching, no choosing.
2. **"Heal Your Mind"** - Perfect for when you feel tired, stressed, or lonely.
3. **"Stay Focused"** - Unintrusive PiP window. Work and study with cats by your side.
- **Store Buttons:**
- If `NEXT_PUBLIC_STORE_MODE` is `coming-soon` -> Show "Coming Soon" label.
- If `NEXT_PUBLIC_STORE_MODE` is `live` -> Show Store Links.
- **Supplementary Text**: "One-time purchase. Yours forever."
**Right Side:**
- **Demo Video Frame**:
- Placeholder for WebM video (muted, loop, auto-play).
- Ensure a poster image (thumbnail) can be set.
---
#### Section 2: Experience Section
**PC View:**
- **Heading**: "Try Sumineko in Your Browser"
- **Description**: "Click the button below to start the Picture-in-Picture player. Enjoy the cats while you work on other tasks."
- **Video Player Frame**: Placeholder (Logic implementation not required yet).
- **"Start PiP" Button**: UI only (Functionality to be implemented later).
**Mobile View:**
- **Heading**: "Try the Web Demo on Desktop"
- **Description**: "Open this page on your computer to try the Picture-in-Picture mode for free."
- **Action**: Display Store Buttons prominently.
---
#### Section 3: Collection Introduction
- **Heading**: "Build Your Cat Collection"
- **Description**: "Every cat you meet is saved to your history. Revisit your favorites anytime."
- **Visual**: Placeholder for Collection Screen Screenshot.
- **Note**: Indicate clearly that this feature is exclusive to the smartphone app.
---
#### Section 4: Final CTA
- **Heading**: "Take the Cats Wherever You Go"
- **Action**: Store Buttons (Reuse component from Hero).
---
#### Section 5: Footer
- **Links**:
- Privacy Policy (Link to `/privacy` - page implementation not required)
- Contact (External link, URL changes based on locale):
- ja -> `https://yukapero.com/ja/contact`
- en-US -> `https://yukapero.com/en/contact`
- (and so on for other locales, default to `en/contact`)
- **Copyright**: © 2025 yukapero
---
## Responsive Design
### PC (1024px+)
- Full feature display.
- Hero: 2-column layout (Text Left, Video Right).
- Experience Section: Show Video Player + PiP Button.
### Tablet (768px - 1023px)
- Hero: Keep 2 columns but compact.
- Experience Section: Same as PC.
### Smartphone (767px-)
- Hero: 1 column (Text Top, Video Bottom).
- Experience Section: Switch to "Experience on PC" message.
- Emphasize Store Buttons.
---
## i18n Infrastructure
- Load all text from JSON files (e.g., `/locales/en.json`).
- **Do not hardcode text in components.**
- Structure should allow easy addition of other languages later.
- Locale switching via URL path (`/en/`, `/ja/`) or similar mechanism.
---
## Accessibility (Basic)
- Proper `alt` attributes for images.
- Focus indicators for buttons/links.
- Sufficient color contrast for readability.
---
## Notes
- **No logic required** for video playback or PiP function (UI only).
- **Metadata/OGP**: Use temporary dummy data.
- **Favicon**: Use a placeholder or comment out the reference if file is missing.
결과물 요약
NOTE
반응형 대응도 되어 있지만, 본 글에서는 데스크톱 표시만 다룹니다.
오마카세 패턴
상세 지시 패턴
결과물을 개별적으로 자세히 살펴보기
v0（v0 Agent）
오마카세 패턴 쪽은 아주 정석적인 UI 디자인에 매우 차분한 배색으로, 좋게 말하면 무난하고 나쁘게 말해도 무난 중의 무난이라는 인상입니다.
이미지나 영상, 아이콘 등이 임시인 상태라 더욱 간소함이 두드러지는 것일지도 모릅니다.
실제로 그런 소재를 넣는다면, 오히려 이 간소함이 스크린샷이나 영상 같은 요소를 돋보이게 해주는 좋은 균형이 될 수도 있겠습니다.
반면 상세 지시 패턴 쪽은 프롬프트의 내용을 충실히 지키면서도, 전체적으로 이 또한 차분한 디자인입니다.
글자를 굵게 해서 강조하는 일도 없고, 좋게 말하면 평온하고 나쁘게 말하면 밋밋한 인상을 주어 오마카세 패턴 쪽과 별로 인상이 다르지 않습니다.
bolt.new （Claude Sonnet 4.5）
오마카세 패턴 쪽은 오렌지색을 기조로 한 부드럽고 생동감 있는 디자인과 배색으로, 자연스럽게 오렌지색 글자나 이미지로 시선이 유도되어 세련된 인상을 받습니다.
스크롤하지 않아도 보이는 위치에 있는 소구 문구
사소한 포인트지만, HERO 섹션, 즉 스크롤하지 않아도 보이는 위치에 "Experience the magic(마법을 체험해 보세요!)"이라는 흥미를 끄는 듯한, 은근한 소구 요소가 있는 것도 이탈자를 줄이는 좋은 장치네요.
다만 임시 요소라고는 하지만, HERO 섹션의 스마트폰 디자인이나 컬렉션 섹션 요소의 밋밋함에서 어딘가 촌스러움이나 저렴함, 아마추어 느낌을 받았습니다.
반면 상세 지시 패턴 쪽은 프롬프트에 정말 충실한 것은 좋지만, 너무 충실해서 bolt의 장점을 죽여버린 듯한 인상을 받습니다.
결코 전체적으로 나쁘지는 않지만, 오마카세 패턴과 비교하면 너무 단조롭습니다.
이는 bolt가 나쁜 것이 아니라, 제가 준비한 프롬프트의 낮은 수준이 그대로 형태로 나타난 것이라고 생각됩니다.
Lovable
오마카세 패턴 쪽은 우선 눈에 띄는 것이 얼굴이 뭉개진 고양이 일러스트입니다.
제가 소재를 제공하지 않았기 때문에 친절하게 준비해 준 것 같지만, 유치원생이 그린 듯한 초현실적인 디자인에 저도 모르게 웃음이 나옵니다.
하지만 이것들은 어디까지나 임시로 준비해 준 것이므로, 이 얼굴 붕괴 고양이를 무시하고 다른 부분의 디자인에 눈을 돌리면, 배경 곳곳에 고양이가 있거나 강조하고 싶은 부분은 확실히 갈색이나 오렌지색 포인트 컬러로 강조하는 등 나쁘지 않습니다.
상세 지시 패턴 쪽은 지시에 매우 충실하면서도, 강조하고 싶은 문자열을 굵게 & 앱에 맞춰 부드러운 폰트로 처리하거나, PiP 전환 버튼을 프롬프트에서 딱히 명시하지 않은 오렌지색으로 강조하는 등, 곳곳에 고심한 흔적이 보입니다.
Gemini 3.0 Pro
오마카세 패턴 쪽은 좋든 나쁘든 장난기가 없고, 전체적으로 잘 정돈된 디자인/배색으로, 힐링 앱이라기보다는 비즈니스용 앱이나 도구 같은 인상을 받습니다.
단순한 편견일 수 있지만, Google스럽다면 Google스러운 방향성이네요.
디자인의 방향성에 관해서는 앱과 명백히 매치되지 않지만, 그 점을 일단 제쳐두면 전체적으로 퀄리티가 매우 높다고 느껴집니다.
"웹 디자인 교과서에 따라 만들어 봤습니다!"라는 인상으로, 호불호 없이 안심하고 의뢰할 수 있을 것 같습니다.
사소하지만, PiP나 브라우저 같은 임시 일러스트의 재현도도 높네요.
완성 이미지를 잡기 쉬워서 은근히 기쁜 포인트입니다.
상세 지시 패턴 쪽은 다른 AI와 마찬가지로 지시에 충실하고, 프롬프트의 디자인 지시 수준이 낮은 것에 영향을 받아버렸지만, 세세한 포인트로 스마트폰 이미지나 컬렉션 화면 이미지가 약간 비스듬히 기울어진 역동적인 디자인을 애드리브로 도입하여 아주 좋은 포인트가 되었습니다.
또한, 푸터에서 자연스럽게 걷고 있는 고양이도 멋지네요.
Opus 4.5
오마카세 패턴 쪽은 전체적으로 밝고 컬러풀하며 귀여운 디자인으로, '고양이 힐링 앱'이라는 테마성을 확실히 디자인에 반영하고 있음을 알 수 있습니다.
헤더도 투명감 있는 현대적인 디자인이라 매우 세련되었습니다.
배경에 흩어진 아이콘이나 제목의 그라데이션, 다채로운 배색 등 장난기가 가득하면서도 디자인으로서 일관성이 있어 어색함이 느껴지지 않는 훌륭한 디자인 같습니다.
반면 상세 지시 패턴 쪽은 오마카세 패턴과 비교해 보면 Opus 4.5의 장점을 완전히 죽여버려, 단번에 지루한 디자인이 되어버렸습니다.
bolt와 마찬가지로 프롬프트의 낮은 수준이 그대로 형태로 나타나 버린 것처럼 보입니다.
GPT 5.2
오마카세 패턴 쪽은 디자인이나 배색의 방향성이 Opus와 비슷하며, 컬러풀한 그라데이션을 포인트로 곳곳에 사용하여 밝은 분위기입니다.
저 같은 아마추어가 이런 다채로운 그라데이션을 쓰려고 하면 아무래도 촌스러운 느낌이 나기 마련인데, 예쁘고 잘 정돈된 인상입니다.
타 모델은 고양이 이모지나 사진 등으로 임시 소재를 표현했지만, GPT 5.2는 일절 그런 것은 사용하지 않은 것 같습니다.
또한, HERO 섹션에서 타 모델과의 차이가 현저하게 나타납니다.
HERO 섹션 전체가 카드 요소로 표현되어 있고, 스마트폰 이미지는 세로형이 아닌 정사각형으로 표현되어 있습니다.
하지만 스마트폰 화면 하단의 요소가 튀어나와 있거나, 다운로드 링크 등이 설치된 행이 앱의 소구 문구 요소와 같은 열에 배치되어 있어 복잡해 보이는 등, 디자인 아마추어인 제가 봐도 약간의 위화감을 느낍니다.
상세 지시 패턴 쪽은 Opus나 bolt 등과 마찬가지로 지루한 디자인이 되어버렸습니다.
지금까지 여러 번 언급했듯이 좋든 나쁘든 프롬프트에 충실하다는 것의 방증이라고 생각합니다.
하지만 Lovable에서는 오렌지색을 포인트 컬러로 더하거나 폰트를 앱에 맞춰 부드러운 것으로 바꾸고, Gemini에서는 요소를 일부러 기울이는 등 사소한 표현의 기지가 돋보였지만, GPT 5.2에서는 그런 류의 모습은 전혀 볼 수 없었습니다.
독단과 편견에 가득 찬 총평과 정리
마음에 든 AI 랭킹
이번에 얻은 결과를 바탕으로, 이유를 곁들여 제가 마음에 든 AI 순서대로 나열해 보겠습니다.
참고로 저는 디자인 측면에서는 완전 초보라 전문적인 식견이 있는 것은 아니므로, 어디까지나 초보자 나름의 직관과 체감에 근거한 평가입니다.
| # | 선수 | 이유 |
| 1위 | Gemini 3.0 Pro | 대충 지시하든 상세하게 지시하든, 어느 쪽이든 디자인적인 세련됨과 안정감이 느껴진다. 일단 Gemini에게 부탁해 두면 종합적으로 평균 이상의 결과물을 내놓을 것이라는 느낌을 가장 강하게 받을 수 있었기에 1위. |
| 2위 | Opus 4.5 | 오마카세 프롬프트에서 앱의 취지를 잘 해석하여 디자인에 고퀄리티로 반영한 점이 훌륭하다. 하지만 프롬프트의 질이 낮으면 Gemini보다 단번에 결과물의 질도 낮아진다는 점에서 주의가 필요하다고 느꼈다. |
| 3위 | GPT 5.2 | 전체적으로 퀄리티가 높아 매우 가능성이 느껴지지만, 역시 오마카세 패턴에서의 HERO 섹션 디자인에 일말의 불안함을 느껴버렸다. |
| 4위 | bolt.new (Sonnet 4.5) | 오마카세 패턴에서의 일부 요소의 촌스러움에 더해, Opus 4.5와 마찬가지로 애드리브 능력은 높지만 프롬프트에 따라 bolt의 장점을 죽여버릴 수 있다고 느낀 점에서 주의가 필요하다고 느껴 4위. |
| 4위 | Lovable | 역시 얼굴 붕괴 고양이가 신경 쓰인다. 일시적인 임시 소재일 뿐이니 신경 쓸 필요 없을지도 모르지만, 임시 이미지가 너무 조잡하면 완성 이미지를 잡기 어려우므로 개인적으로는 감점할 수밖에 없다. 하지만 상세 지시 프롬프트는 다른 AI와 비교해도 뒤지지 않을 정도의 완성도였다. |
| 5위 | v0(v0 Agent) | 전체적으로 무난하고 수수하며 지루하다. 애드리브 능력은 낮고, 게다가 사용자의 프롬프트 엔지니어링 수준이 낮으면 그에 크게 영향을 받는다고 느꼈기에, 디자인에 대한 고집이 강한 사람에게는 꽤 주의해서 이용할 필요가 있어 보였다. 과거에 한때 애용하던 도구였던 만큼 조금 아쉽다. |
Gemini 3.0 Pro가 뭐든지 만들 수 있어서 대단하다! 라는 말은 최근 SNS에서 화제가 되었지만, 디자인 측면에서도 뛰어나서 감탄했습니다.
지금까지 Claude Code(Max Plan)와 Cursor를 주로 사용해 왔지만, Antigravity로 갈아타는 것도 괜찮을지도 모른다는 생각을 강하게 하게 된 결과였습니다.
디자인 센스가 없는 사람은 프롬프트에서 너무 나서지 않는 것이 좋다
결과를 보고 누구나 느꼈을 점이라고 생각하지만, 상세 지시 패턴 쪽에서는 일부 모델에서 기지가 보이기도 했지만 기본적으로 수수하고 지루한 결과물이 되어버렸습니다.
특히 배색을 앱 내의 테마 색에 맞춰 브라운 계열로만 지정해 버린 것이 가장 단조로운 디자인을 부추긴 것 같습니다.
AI는 좋든 나쁘든 기본적으로 지시에 충실하므로 당연하다면 당연하겠지만, 디자인 센스가 없는 사람이 무리해서 세세하게 디자인 부분까지 파고들어 프롬프트를 설계해서는 안 될 것입니다.
잘 모르는 영역에 관해서는 어느 정도 맡겨버림으로써, AI는 대체로 해당 영역의 모범 사례(Best Practice)에 따라 판단해 줄 것입니다.
그러면 이번에는 "어디선가 본 적 있는 것 같다"는 느낌은 어쩔 수 없이 나오겠지만, 초보자가 적당히 만지작거리는 것보다는 훨씬 낫다고 느꼈습니다.
진정한 지옥은 지금부터다
이번 결과물은 단순한 출발점에 불과하며, 이것을 베이스로 몇 번이고 AI와 방향성을 조율하며 자신의 이상적인 UI/UX에 근접해가는 공정이 필요합니다.
저의 경우 센스는 없는 주제에 UI에 묘하게 집착하는 편이라, 이 공정이 특히 시간이 걸립니다.
그것을 감안하면 첫 번째 결과물보다도, AI의 사고 시간의 짧음(시행착오 주기의 짧음)이나 버그 발생률의 낮음, 지시의 의도를 정확히 파악하여 구현으로 연결하는 힘 등이 훨씬 중요하기도 합니다.
그 관점일 경우, 랭킹 순위는 위에 나열한 것과는 전혀 다른 것이 될 것으로 생각됩니다.
그러므로 본 결과만 보고 우열을 판단하는 것은 성급한 것이 틀림없으니, 어디까지나 참고만 하시고 꼭 직접 시도해 보시길 바랍니다.
