Claude로 기존 프로젝트의 디자인을 바꿀 수 있는 20개의 무료 오픈소스 HTML 페이지를 만들었습니다. 로그인 필요 없음.

수년간 웹사이트를 만들어오면서 Claude Code를 써보니 확실히 느낀 점이 하나 있음. 기능적인 인터페이스를 짜는 건 점점 쉬워지는데, 일관성 있고 독창적인 비주얼 아이덴티티를 뽑아내는 건 여전히 수많은 반복 작업이 필요하다는 거임.

Claude한테 "고급스럽게 만들어줘"라거나 "요즘 SaaS 느낌으로 해줘"라고 시켜봐야, 이런 지시어들은 해석의 여지가 너무 많거든.

그래서 좀 다른 접근 방식을 고민해봤음.

디자인을 말로 설명하는 대신, 아예 완성된 디자인을 레퍼런스로 던져주면 어떨까?

최근에 다시 꺼내 든 InstaLanding.ai라는 프로젝트가 바로 이런 생각에서 시작된 거임.

순수 HTML, CSS, JavaScript만 써서 랜딩 페이지 20개짜리 라이브러리를 만들었음.

각 페이지는 별도의 프레임워크나 의존성, 빌드 과정 없이 HTML 파일 하나로 완벽하게 돌아감.

왜 굳이 단일 파일 HTML인가?

코딩 에이전트가 최대한 이해하기 쉽고 어디서든 바로 쓸 수 있게 만들고 싶었거든.

파일 하나에 다 때려 박으면 Claude가 실제 구현된 내용을 바로 볼 수 있음:

• 타이포그래피, 색상, 간격

• 레이아웃 구조 및 반응형 동작

• 컴포넌트 스타일링

• 애니메이션 및 인터랙션

• 전반적인 비주얼 언어

해석해야 할 스크린샷도 없고, 복잡한 의존성 트리 뒤질 필요도 없음. 그냥 돌아가는 코드 그 자체니까.

흥미로운 활용 사례: 기존 Claude Code 프로젝트 리스킨하기

예를 들어, Claude Code로 대시보드나 SaaS 앱을 이미 다 만들어놨다고 치자.

기능은 잘 돌아가는데 디자인이 영 마음에 안 드는 상황이지.

그럴 때 앱을 처음부터 다시 짤 필요 없이, 이 HTML 파일 중 하나를 Claude한테 던져주고 디자인 시스템을 추출해서 적용해달라고 하면 됨.

내가 테스트 중인 프롬프트는 이거임:

"첨부된 HTML 파일을 분석해서 타이포그래피, 색상, 간격, 레이아웃 원칙, 컴포넌트, 테두리, 그림자, 애니메이션을 포함한 비주얼 디자인 시스템을 추출해. 그리고 이 디자인 언어를 내 기존 프로젝트에 일관되게 적용해줘. 기존 콘텐츠, 기능, 라우트, 비즈니스 로직은 전부 그대로 유지하고. HTML 파일은 내 앱의 아키텍처를 대체하는 게 아니라, 비주얼의 기준점(source of truth)으로만 활용해."

AI 개발 과정에서 흔히 뒤섞이는 두 가지를 확실하게 분리하는 게 핵심임.

앱이 무슨 기능을 하는가 vs 앱이 어떻게 보이는가.

이미 짜놓은 기능과 아키텍처는 그대로 가져가되, Claude한테는 구체적인 비주얼 레퍼런스를 쥐여주는 거지.

배운 점

가장 크게 깨달은 건 코드 자체가 훌륭한 디자인 레퍼런스가 될 수 있다는 거임.

미적 감각을 설명하려고 프롬프트를 20번씩 날리는 것보다, 그 감각이 구현된 결과물을 직접 보여주는 게 훨씬 빠름.

물론 완벽한 결과를 보장하진 않음. 반응형 레이아웃이나 컴포넌트 일관성, 에이전트가 멋대로 바꿔버린 부분은 여전히 직접 검수해야 함.