Claude가 만든 코드를 실제 서비스로 고치는 법

디자인 파편화 막기

Claude가 내놓은 HTML 파일은 처음에는 그럴듯해 보입니다. 하지만 페이지가 3개만 넘어가도 수정은 악몽이 됩니다. 폰트 크기 하나 바꾸려고 파일을 10개씩 열어보는 건 시간 낭비입니다. 코드를 분리하세요.

프로젝트 폴더를 만드세요. CSS는 /assets/css, 이미지는 /assets/img, 레이아웃은 /components로 나눕니다.
파일명은 main-header.html처럼 소문자와 하이픈만 쓰세요. Claude가 경로를 착각할 일은 줄어듭니다.
메인 HTML 상단 태그에 를 넣고 스타일을 중앙에서 관리하세요.

이렇게 하면 나중에 헤더 하나만 고쳐도 전체 페이지에 수정 사항이 즉시 적용됩니다. 매번 파일을 수정하며 시간을 쏟을 필요가 없습니다.

CSS 변수로 컬러 팔레트 고정

색상 코드를 컴포넌트마다 직접 입력하지 마세요. 버튼 색을 바꾸고 싶을 때마다 수천 줄을 뒤져야 합니다. 대신 CSS 변수를 쓰세요.

/assets/css/global.css 파일을 엽니다.
:root { --main-color: #000000; --sub-color: #ffffff; }처럼 핵심 색상 3가지를 정의하세요.
스타일을 작성할 때 background-color: var(--main-color); 처럼 쓰세요.

나중에 브랜드 색상이 바뀌면 파일 하나만 3초간 수정하세요. 모든 페이지의 버튼 색이 한꺼번에 바뀝니다. 디자인을 매번 손보는 것보다 훨씬 효율적입니다.

로컬 환경에서 즉시 확인하기

코드를 수정하고 브라우저로 돌아가 새로고침하는 과정이 반복되면 집중력이 깨집니다. VS Code의 Live Server 확장 기능을 설치하세요.

VS Code에서 Live Server를 설치하고 하단 Go Live 버튼을 누르세요.
브라우저에서 사이트를 띄운 뒤 마우스 우클릭 -> 검사를 눌러 개발자 도구를 엽니다.
Elements 탭에서 여백이나 글자 크기를 즉석에서 수정하세요. 수정된 값을 보고 그대로 CSS 파일에 옮겨 적으면 됩니다.

새로고침 없이 실시간으로 눈에 보이는 변화를 확인하세요. 디자인 수정에 드는 시간이 절반으로 줄어듭니다.

Claude에게 규격 강제하기

Claude는 요청할 때마다 코드를 다르게 짭니다. 애초에 규칙을 정해두고 대화하세요. 프로젝트 폴더 루트에 CLAUDE.md 파일을 만듭니다.

CLAUDE.md에 CSS 변수 규칙과 사용할 폴더 구조를 적어두세요.
자주 쓰는 버튼이나 카드 형태를 XML 형식(예: 코드)으로 정의해 두세요.
Claude에게 새 화면을 요구할 때 "CLAUDE.md 규칙을 지켜서 작성해"라고 한 마디만 덧붙이세요.

AI가 임의로 코드를 꼬아놓는 일이 현저히 줄어듭니다.

Vercel로 자동 배포하기

서버 설정이나 복잡한 환경 구성은 고민하지 마세요. Vercel을 쓰면 코드만 올려도 웹사이트가 바로 작동합니다.

깃허브에 코드를 푸시하세요.
Vercel 사이트에서 깃허브 계정을 연결하고 프로젝트를 생성합니다.
이후 코드를 깃허브에 올릴 때마다 Vercel이 45초 안에 변경 사항을 반영해 사이트를 업데이트합니다.

직접 서버를 관리할 필요가 없습니다. 도메인 주소는 자동으로 생성되며, 문제가 생기면 언제든 이전 버전으로 되돌릴 수 있습니다. 지금 바로 코드부터 올리세요.

Claude가 만든 코드를 실제 서비스로 고치는 법

디자인 파편화 막기

프로젝트 폴더를 만드세요. CSS는 /assets/css, 이미지는 /assets/img, 레이아웃은 /components로 나눕니다.
파일명은 main-header.html처럼 소문자와 하이픈만 쓰세요. Claude가 경로를 착각할 일은 줄어듭니다.
메인 HTML 상단 태그에 를 넣고 스타일을 중앙에서 관리하세요.

이렇게 하면 나중에 헤더 하나만 고쳐도 전체 페이지에 수정 사항이 즉시 적용됩니다. 매번 파일을 수정하며 시간을 쏟을 필요가 없습니다.

CSS 변수로 컬러 팔레트 고정

색상 코드를 컴포넌트마다 직접 입력하지 마세요. 버튼 색을 바꾸고 싶을 때마다 수천 줄을 뒤져야 합니다. 대신 CSS 변수를 쓰세요.

/assets/css/global.css 파일을 엽니다.
:root { --main-color: #000000; --sub-color: #ffffff; }처럼 핵심 색상 3가지를 정의하세요.
스타일을 작성할 때 background-color: var(--main-color); 처럼 쓰세요.

로컬 환경에서 즉시 확인하기

코드를 수정하고 브라우저로 돌아가 새로고침하는 과정이 반복되면 집중력이 깨집니다. VS Code의 Live Server 확장 기능을 설치하세요.

VS Code에서 Live Server를 설치하고 하단 Go Live 버튼을 누르세요.
브라우저에서 사이트를 띄운 뒤 마우스 우클릭 -> 검사를 눌러 개발자 도구를 엽니다.
Elements 탭에서 여백이나 글자 크기를 즉석에서 수정하세요. 수정된 값을 보고 그대로 CSS 파일에 옮겨 적으면 됩니다.

새로고침 없이 실시간으로 눈에 보이는 변화를 확인하세요. 디자인 수정에 드는 시간이 절반으로 줄어듭니다.

Claude에게 규격 강제하기

Claude는 요청할 때마다 코드를 다르게 짭니다. 애초에 규칙을 정해두고 대화하세요. 프로젝트 폴더 루트에 CLAUDE.md 파일을 만듭니다.

CLAUDE.md에 CSS 변수 규칙과 사용할 폴더 구조를 적어두세요.
자주 쓰는 버튼이나 카드 형태를 XML 형식(예: 코드)으로 정의해 두세요.
Claude에게 새 화면을 요구할 때 "CLAUDE.md 규칙을 지켜서 작성해"라고 한 마디만 덧붙이세요.

AI가 임의로 코드를 꼬아놓는 일이 현저히 줄어듭니다.

Vercel로 자동 배포하기

서버 설정이나 복잡한 환경 구성은 고민하지 마세요. Vercel을 쓰면 코드만 올려도 웹사이트가 바로 작동합니다.

깃허브에 코드를 푸시하세요.
Vercel 사이트에서 깃허브 계정을 연결하고 프로젝트를 생성합니다.
이후 코드를 깃허브에 올릴 때마다 Vercel이 45초 안에 변경 사항을 반영해 사이트를 업데이트합니다.

Claude가 만든 코드를 실제 서비스로 고치는 법

관련 영상

아름다운 웹사이트 구축을 위한 경이로운 클로드(Claude) 디자인 스킬

Claude가 만든 코드를 실제 서비스로 고치는 법

디자인 파편화 막기

CSS 변수로 컬러 팔레트 고정

로컬 환경에서 즉시 확인하기

Claude에게 규격 강제하기

Vercel로 자동 배포하기

커뮤니티의 다른 글

사내 시스템에 llm api 붙일 때 마주하는 현실적인 한계와 대응법

레거시 백엔드에 GPT-6 Astra 붙일 때 예산 승인과 보안 통과를 먼저 끝내는 법이 있습니다

에이전트끼리 대화하다 6천만 원 청구서가 나오는 이유

사내 RAG 벡터 검색에 Okta 권한 필터를 직접 거는 방법

브라우저 에이전트에게 내 구글 계정을 통째로 넘기면 안 되는 이유

Apple Won the AI Race

댓글 (0)

Claude가 만든 코드를 실제 서비스로 고치는 법

디자인 파편화 막기

CSS 변수로 컬러 팔레트 고정

로컬 환경에서 즉시 확인하기

Claude에게 규격 강제하기

Vercel로 자동 배포하기