Loading...
벽에 상품 화면이 가득 걸린 작업실, 가운데 노트북에 Checkout 페이지가 켜져 있다.

디자인 레퍼런스 · LazyWeb

체크아웃, 또 어디서 본 화면이 나왔어요

쇼핑앱 체크아웃 화면을 만들어 달라고 했어요. 1분 만에 큰 버튼과 카드 입력창이 나왔어요. 근데 어디서 본 듯한 평균 화면이지, 실제로 팔리는 앱의 화면은 아니에요.

그전

레퍼런스 없이 시키면

우리 쇼핑앱 체크아웃, 요즘 앱처럼 만들어줘.

큰 버튼, 카드 결제, 입력 필드 최소화로 일반적인 체크아웃을 구성할게요.

이제

실제 화면을 먼저 찾으면

만들기 전에, 실제 쇼핑앱은 체크아웃을 어떻게 풀었는지부터 찾아줘.

실제 앱 화면 12장을 받았어요. 주소 다음에 결제, 배송 옵션은 한 줄로 두는 패턴이 많아요. 이 화면들 기준으로 우리 시안을 맞출게요.

대화는 재구성이에요. 화면 수는 2026-08-22 lazyweb.com 소개문 기준 281k+예요. 호스트 주소는 https://www.lazyweb.com/mcp예요.

AI는 화면을 기억으로 그려요. 학습한 수천 개 체크아웃의 평균이 나와요. 그래서 예쁘긴 한데, 어느 앱에서도 본 적 없는 화면이 돼요. 실제로 팔리는 앱이 어떻게 풀었는지는, 그 화면을 직접 보여 줘야 달라져요. 그걸 매번 캡처해서 붙이는 것도 일이에요.

이 도구를 붙이면, 그리기 전에 실제 앱 화면부터 찾아서 보여 줘요.

설치는 한 줄, 토큰은 자동

로그인도 메일도 필요 없어요. 대신 베어러 토큰이 생기고, 그 값은 git에 올리면 안 돼요.

  1. 1

    이 말을 그대로 AI에 붙여넣으세요

    LazyWeb을 설치해줘. 공식 설치는 https://www.lazyweb.com/install.sh 이고, 호스트 MCP는 https://www.lazyweb.com/mcp 야. 내 클라이언트(Claude Code/Cursor/Codex 중 내가 쓰는 것)에 맞게 연결하고, 토큰은 git에 넣지 마.

    터미널이 익숙하다면, 공식 한 줄은 이거예요.

    curl -fsSL https://www.lazyweb.com/install.sh | bash
  2. 2

    설치가 끝났다면, 이렇게 물어보세요

    지금 만드는 화면이 체크아웃이야. LazyWeb으로 실제 쇼핑앱 체크아웃 레퍼런스를 먼저 찾고, 패턴과 안티패턴을 짧게 정리해줘.

파이프 설치가 꺼려지면 README의 수동 MCP 설정을 쓰면 돼요. 토큰은 저장소 밖에 두세요. 별 447은 2026-09-05 GitHub API 값이에요.

세 줄 요약

이럴 때

랜딩·체크아웃·온보딩처럼 이미 시장에 답이 있는 화면을 만들 때. 감으로 그리기 전에 실제 앱을 보고 싶을 때.

들어 있는 것

호스트 MCP로 화면 검색·다운로드, 카테고리 필터, 브랜드 맥락. 같은 저장소에 스킬 팩이 붙어 있어서, 검색 도구만 두지 말고 쓰는 순서까지 같이 넣어요.

안 되는 것

세상에 아직 없는 화면을 발명하진 않아요. 토큰 쿼터를 넘기면 429가 나요. 데이터 도구와 리포트 범위는 플랜마다 달라요. GitHub 별은 2026-09-05 기준 447이라, 인기로 고른 도구는 아니에요.

써본 사람들 반응

설치 수가 큰 도구가 아니에요. 그래서 더, 공식 문장과 한계부터 적어요.

도움 됐다는 쪽

  • “Design with evidence, not vibes.” github.com

    — aboul3ata/lazyweb-skill README

  • “Downloading or updating the skill pack, installing or configuring a client, and creating or reusing a bearer token are available to everyone without charge.” github.com

    — aboul3ata/lazyweb-skill README

아쉽다는 쪽

  • “The hosted MCP enforces abuse controls, including per-token transport quotas; clients that ignore backoff may receive 429 mcp_rate_limited.” github.com

    — aboul3ata/lazyweb-skill README

  • “Remote MCP tools do not create a /lazyweb slash skill by themselves.” lazyweb.com

    — LazyWeb 에이전트 온보딩

이 글이 다루는 범위

직접 만든 도구가 아니라서, 만든 기록이 아니라 공개된 설치 경로와 한계만 적어요.

  1. 01

    한 줄 설치 스크립트가 스킬 파일과 MCP 설정을 같이 넣어요. 연결만 하고 레시피를 빼먹으면 검색 도구만 남아요.

  2. 02

    토큰은 결제 권한이 없는 베어러예요. git에 올리지 말라고 README가 못 박아 뒀어요.

  3. 03

    별 447은 인기 1위가 아니에요. 디자인 일에 화면 증거가 필요할 때 고르는 도구예요.

← AI 도구