✏️🖥️ Stitch를 이용한 웹사이트 개발 시행착오 2 - 프롬프트 깎는 노인

> 시리즈 연재: ✏️🖥️250610 - Stitch 를 이용한 웹 사이트 개발 시행착오 1 ← 이전 글

🎯 오늘의 미션: 디자인을 실제 코드로 만들어보자!

지난번에 Stitch로 블로그 디자인을 만들어봤는데, 이제 진짜 어려운 부분이 시작됩니다.
AI가 만든 예쁜 디자인을 실제로 작동하는 웹사이트로 바꾸는 작업이죠!

솔직히 말하면... 생각보다 훨씬 복잡하고 시간이 많이 걸리더라구요 😅

0단계 : Stitch 프롬프팅 UI

Stitch 링크 : https://stitch.withgoogle.com/

ALT

여러 항목이있는 화면의 스크린 샷

• Stitch 는 챗 지피티와 같이 대화형 프롬프트 기반으로 웹 디자인을 할 수 있는 도구입니다

• 구글에서 만들었고 현재(25.06.10) 기준에선 아직 베타라서 다소 기능이 부족합니다

• 개인적으로 가장 필요한 기능이라고 하면 당장 떠오르는 것들은 이정도가 있네요

  • 프로젝트 기능

  • 프롬프트 제목 수정 기능

  • 한국어 지원 (제발..)

• 특징

  • 엄청나게 긴 텍스트 한 번에 소화 가능!

    • ("잘" 소화하는 것은 아님)

  • 화이트/블랙 모드를 웹 디자인 단에서 초기에 설정 가능 (진짜 좋던데요?)

  • Figma 와 연동 가능

    • Figma MCP 를 이용하면 디자인 생산성이 엄청 올라갑니다 (아직 못해봄)

  • HTML/CSS 코드 복사 가능

    

    ALT

    코드 편집기의 스크린 샷

    • 개인적으로 가장 뜨아아악한 기능입니다

    • 여기도 잡기술이 필요한데 그것도 작성했어요

🔧 1단계: 불필요한 요소들 정리하기

블로그를 작성하기 전에, 사진을 찍지 못했는데
사전에 테스트한다고 PRD 문서를 만들고 프롬프팅 돌렸습니다.

먼저 Stitch가 만든 디자인에서 필요없는 부분들을 제거해야 했습니다.

문제점 발견:

- 오른쪽 포스트/카테고리/태그 개수를 세어주는 패널 → 필요없음!

- 아래쪽 포스트 패널도 레이아웃이 마음에 안듦

이런 식으로 하나하나 수정 요청을 해야 하는데, 여기서 첫 번째 꿀팁이 나옵니다.

💡 꿀팁 1: 영어로 프롬프팅하자

ALT

검은 색 화면에 한국어 앱의 스크린 샷

영어 실력이 짧다보니까
LLM 번역기의 도움을 받아서 사이트를 수정했습니다.
한국어보다 영어로 요청할 때 더 정확한 결과가 나오더라구요!

ALT

텍스트가 많은 페이지 스크린 샷

-> 어쩔때는 한국어를 읽지를 못해요

📋 2단계: 완성된 디자인 관리하기

ALT

Adobe Adobe Adobe Adobe Ado의 스크린 샷

여기서 중요한 포인트: 완성된 페이지는 반드시
Figma에 올려서 나중에 유지보수할 수 있도록 해두세요!

ALT

Adobe Photoshop CS6- Adobe Photoshop CS6- Ado

• Figma 에서도 CSS 레이아웃 복사가 가능합니다!

• 저는 여기에서만 의존했는데

• Stitch 에서 전체 코드를 복사 가능한 것을 늦게 알아서 고생 좀했습니다 🤣

⚠️ Stitch 사용 시 주의사항들

문제 1: 프롬프트 길이 제한

ALT

검은 배경이있는 웹 사이트의 스크린 샷

현재 오른쪽을 보시면 프롬프트가 길어서 코딩 문서를 만들어달라고 못하는 상황입니다.
Stitch가 아직 베타버전이라 그런가봐요.

발견한 문제들:

- 한국어 프롬프트 인식률 낮음

- 프롬프트 코드 복사가 간헐적으로 오작동

- 긴 프롬프트 처리 불가

💡 꿀팁 2: 짧은 프롬프트 활용법

ALT

그 페이지를 다시 보여주십시오.

이렇게 "페이지를 다시 보여줘" 라는 짧은 프롬프트를 건네주면...

이렇게 사이트를 재출력해주는데, 짧은 프롬프트로도 수정이 되고,
전체 레이아웃 코드 복사가 가능해집니다!

🔄 3단계: Stitch → Cursor 코드 이전 작업

마음에 안드는 부분이 있다면 충분히 수정하고, 전체 레이아웃을 복사 →
Cursor에 옮기는 수작업을 반복해야 합니다.

Cursor에 일단 대충 복붙 작업을 진행합니다.
이 작업을 사이트를 다 만들 때까지 반복해야 해요.

• 사실 프로젝트 + 제목 수정 기능만 있어도 한 번에 전부 만들고

• 코드만 복붙해도 되는데 기능이 부족한게 아쉽습니다..
  

기능별 수정 프로세스

맘에 안드는 부분이 있으면:

1. 해당 페이지의 역할을 질문하고

ALT

한국 응용 프로그램 화면의 스크린 샷

2. 필요하지 않으면 영문으로 해당 기능을 변환해서 프롬프팅 작업을 진행합니다.

• 이 작업을 하면서 UI 개발 배경지식도 공부해가는 것 같아요

• 잘 모르는 부분이 있으면 AI 에게 물어보고 어떻게 해야하는지 질문을 빠르게 하는 것이 팁!

💡 꿀팁 3: 컬러 코딩 기록하기

중요: 컬러코딩은 반드시 기록해두세요!

- 스티치가 기능을 수정하면서 컬러코딩도 함께 건드립니다

- 나중에 일관성을 유지하려면 색상값들을 따로 저장해둬야 해요

🛠️ 4단계: 실제 구현 분석

이제 구현 단계입니다! 여기서 궁금한 점이 생겼어요.
스티치는 어떤 기술스택을 메인으로 사용할까요?

우리의 Cursor-Claude에게 질문해봤습니다:

📋 Stitch 분석 결과

주요 기술 스택:

1. HTML/CSS: 기본적인 마크업 및 스타일링

2. TailwindCSS: 모든 파일에서 스타일링 활용 (CDN 방식)

3. 웹 폰트: Google Fonts의 Newsreader와 Noto Sans 폰트

4. SVG 아이콘: 내장된 SVG 아이콘 (Lucide 아이콘 세트)

프로젝트 구조:

- 정적 HTML 파일들로 구성

- CDN을 통한 TailwindCSS 사용 (빌드 도구 없음)

- 반응형 디자인: @container 쿼리와 미디어 쿼리 활용

특이사항:

- 번들러/빌드 도구 미사용

- JavaScript 없음 (순수 정적 마크업)

- 실제 기능보다는 디자인 목업(mockup) 성격

🤔 실전 경험을 통한 깨달음

⏰ 시간 관리의 중요성

핵심 교훈: 웹 디자인을 이쁘게 만드는 시간을 제한하는 것을 추천합니다!

왜 그럴까요?

- 페이지 하나하나 구현하는 과정이 프롬프팅이 있어도 쉽지 않음

- 시간을 많이 사용하기도 하지만, 어딘가에서 막히면 열정이 식고, 재점화하는 작업이 은근 힘들더라구요

- 제가 힘들다고 느끼는 거면 다른 분들은 훨씬 힘들 테니까요

📝 실용적인 조언들

1. YAML, JSON 문법 + 영문 변환으로 스티치에게 프롬프팅하는 것을 추천

2. 구현된 사이트의 컬러코딩을 기록해주세요

3. 본인의 작업 우선순위를 인지하는 것이 중요!

- 아니면 일을 위한 일을 계속하게 됩니다

- 저는 기능구현이 우선이기에, 더 이쁜 사이트 제작은 다음에 하려고 합니다

🚀 다음 단계: 실제 기능 구현

현재까지는 디자인을 코드로 옮기는 작업이었다면,
이제는 실제로 작동하는 블로그를 만들어야 합니다.

다음 글에서 다룰 내용:

- Next.js + Tailwind CSS로 실제 블로그 구현

- 마크다운 파싱 및 렌더링

- 포스트 목록과 상세 페이지 기능

💡 오늘의 핵심 포인트

✅ 성공 요인들

- 점진적 접근: 한 번에 완벽하게 만들려 하지 말고 단계별로

- 도구의 한계 인정: Stitch 베타버전의 제약사항을 파악하고 우회

- 우선순위 명확화: 디자인보다 기능 구현에 집중

⚠️ 주의사항들

- 프롬프트는 짧고 명확하게

- 컬러 코딩과 디자인 요소는 별도 기록

- 시간 제한을 두고 작업하여 완벽주의 함정 피하기