Markdown 버전

AI-translated from English; not yet reviewed by a fluent editor.

# Claude Code에서 고정 버전 DESIGN.md로 한 페이지 수정하기

> 고정 버전 DESIGN.md 하나를 골라 수정 권한이 있는 페이지의 참고 자료로 Claude Code에 제공하고, 변경 코드와 데스크톱·휴대전화 화면을 확인합니다.

By BIG CHANGE Editorial

Published: 2026-10-20T00:01:06.937Z
Updated: 2026-10-20T00:01:06.937Z
Canonical: https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide

![Conceptual charcoal illustration of one clipped design-reference sheet beside an unbranded display showing a simple webpage layout.](https://bigchange.ai/api/media/file/pinned-design-reference-one-page-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE; no Claude Code run, Notion or edited and tested page is depicted.

기존 페이지에는 구체적으로 개선할 점과 지킬 점이 있습니다. VoltAgent의 [Awesome DESIGN.md 모음](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)은 공개 웹사이트를 분석한 일반 텍스트 자료로, AI 코딩 에이전트의 맥락으로 쓸 수 있습니다. 이 안내서는 2026년 10월 14일 커밋의 파일 하나를 제한적인 Claude Code 수정의 시각적 참고로 사용합니다. 수정 코드와 실제 화면을 직접 확인해야 완료로 볼 수 있습니다.

BIG CHANGE는 고정 버전 저장소와 Claude Code 문서를 검토했습니다. Claude Code 실행, 페이지 수정, 시간 측정이나 생성 결과 검사는 하지 않았습니다. 해당 트리에는 `design-md/*/DESIGN.md` 바로 아래에 파일 84개가 있습니다. 이는 그 커밋의 수이며 영구적인 목록 규모가 아닙니다.

## 큰 변화

- **달라진 점:** 버전을 고정한 설계 분석 하나를 명시적 맥락으로 제공해 허용된 페이지 하나를 수정할 수 있습니다.
- **중요한 이유:** 소유자는 유용한 배치나 간격 아이디어를 참고하면서 실제 콘텐츠, 정체성, 동작에 비추어 결과를 확인할 수 있습니다.
- **주의할 점:** 참고 자료는 커뮤니티 분석입니다. 브랜드 세부 사항과 일부 내부 지침이 틀리거나 페이지에 맞지 않을 수 있습니다.

## 시작 전 준비

수정 권한이 있는 페이지와 저장소, 작업 사본 또는 브랜치, 페이지를 로컬에서 표시할 방법, 적격 계정이나 제공업체를 통한 [Claude Code](https://code.claude.com/docs/en/quickstart) 이용 권한이 필요합니다. 수정할 페이지 파일과 프로젝트의 통상적인 실행·검사 방법을 알아두세요. 대상 독자, 필수 문구와 링크, 승인된 색·글꼴·로고와 해결할 시각적 문제 하나를 적으세요. 변경안을 평가하도록 소유자의 결정을 작업 사본 곁에 보관합니다.

고객의 비공개 자료를 주기 전에 계정의 [데이터 정책](https://code.claude.com/docs/en/data-usage) 및 [도구 권한](https://code.claude.com/docs/en/permissions)을 확인하세요. Claude Code는 계정 약관에 따라 프롬프트와 프로젝트 내용을 처리합니다. 로컬 프로젝트라고 모델 세션도 로컬에서만 처리되는 것은 아닙니다. 작업으로 드러날 비공개 문구, 자료나 코드의 공유 권한을 확인하세요.

## 한 페이지에 한 참고 자료 사용

1. 먼저 [고정 버전 모음의 README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)를 여세요. 정한 문제에 도움이 되는 `design-md/<name>/DESIGN.md` 하나를 선택하고 사용 전에 전체 파일을 읽으세요. [Notion 예제](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md)는 배치, 서체, 간격, 구성 요소 제안의 형식을 보여줍니다. 그런데 버튼을 캡슐형과 직사각형으로 모두 설명합니다. 이는 Claude Code에 모든 줄을 따르게 할 것이 아니라 직접 결정해야 할 이유입니다.
2. 선택한 고정 버전 `DESIGN.md` 하나만 작업 프로젝트에 복사하세요. 위치의 예는 `design-reference/DESIGN.md`입니다. 원본 URL, 경로와 커밋 `3b605329240ce735b510037cca322f1831fdd7f8`를 함께 기록하고, 복사본에 저장소의 [MIT 저작권 및 허가 고지](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE)를 보존하세요. Markdown 참고 파일 자체는 패키지 설치가 필요 없습니다. 라이선스는 저장소 자료에 적용되며 해당 회사의 로고, 글꼴 파일, 이미지나 상표 사용권을 주지 않습니다.
3. 허용된 프로젝트에서 Claude Code를 열고 복사 파일을 명시적으로 맥락에 제공하세요. Anthropic은 [파일 참조](https://code.claude.com/docs/en/common-workflows)와 별도의 [프로젝트 지침 파일](https://code.claude.com/docs/en/memory)을 설명합니다. 독립적인 `DESIGN.md`를 폴더에 넣었다고 Claude Code가 읽었다는 증거는 아닙니다. 아래 대괄호의 페이지 경로와 소유자 규칙을 실제 값으로 바꾸고, 수정을 수락하기 전에 자료를 읽었는지 확인하세요.

```markdown
Read @design-reference/DESIGN.md as a visual reference. Edit only [path/to/owned-page] and the existing styles that page needs. Improve [one specific layout or hierarchy problem]. Keep the page's current audience, approved copy, links, brand colors, font and logo. Use only layout, hierarchy or spacing ideas that fit those rules. Do not copy the example site's name, assets or identity. Preserve working interactions and keyboard access. Show the proposed file changes and tell me how to render and check this page with this project's existing commands.
```

4. 실행하거나 수락하기 전에 제안된 차이를 읽으세요. 변경된 모든 파일, 문구와 링크를 확인하고 요청하지 않은 의존성, 자료나 다른 페이지 수정은 거절하세요. 프로젝트에 문서화된 기존 실행 명령으로 페이지를 표시하세요. 데스크톱과 휴대전화 너비로 열어 에이전트의 의도 설명이 아닌 실제 페이지를 검사합니다.
5. 화면을 적어둔 요구 사항과 비교하세요. 필요한 문구와 링크가 남았는지, 제목 순서가 유용한지, 글자·컨트롤 대비가 충분한지, 휴대전화에서 내용 잘림과 가로 스크롤이 없는지 확인합니다. 키보드로 영향을 받은 링크, 버튼, 메뉴와 양식에 접근해 사용하세요. 보이는 초점과 오류 상태를 포함한 변경 상호작용을 시험하세요. 페이지 리비전, 너비, 수행 검사와 결함을 기록하고 해당 페이지가 검사를 통과한 뒤에만 수락합니다.

Claude Code가 자료를 놓쳤다면 파일을 다시 지정하고 사용한 부분을 밝혀 달라고 하세요. 브랜드 규칙과 충돌하면 해당 지시를 요청에서 빼고 관련 코드를 고칩니다. 링크, 초점 이동이나 상호작용이 깨지면 이전 동작을 복원하고 수정 범위를 줄이세요. 페이지를 표시하거나 결과를 확인할 수 없다면 가능해질 때까지 수락하지 않습니다.

이 모음은 다른 사이트에 관한 커뮤니티 설명을 관리자가 있는 그대로 제공한 자료입니다. Notion 파일에는 상충하는 버튼 모양, 문서로 입증되지 않은 마우스 올림 동작과 이 안내서에서 검증하지 않은 코드 검사 명령이 있습니다. 그 제안 대신 프로젝트에서 알려진 검사를 쓰세요. Claude Code 사용료와 후속 호스팅·자료 비용은 계정과 프로젝트에 달렸으며, 편집 시간이나 완성 디자인 품질은 여기서 입증하지 않았습니다.

다른 AI 지원 페이지 작업 방법은 [Genspark 프로토타입 안내서](https://bigchange.ai/blog/genspark-design-prototype-source-zip)에서 호스팅된 프로토타입 복사와 내보낸 소스 ZIP 검사를 설명합니다. 출발 자료와 완료 조건이 다른 작업입니다.

## 출처 및 추가 읽을거리

- [VoltAgent의 고정 버전 README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)는 모음과 있는 그대로 제공되는 공개 사이트 분석을 설명합니다. 파일 수는 고정된 재귀 트리에서 나온 것으로 이후 버전에 대한 주장이 아닙니다.
- 고정 버전 [Notion `DESIGN.md`](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md)는 형식과 내부 모순을 보여줍니다. Notion이 승인한 규격이나 자료 사용권의 근거가 아닙니다.
- 저장소의 [MIT 라이선스](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE)는 사본이나 상당 부분에 저작권·허가 고지를 유지하도록 요구합니다.
- Anthropic의 [Claude Code 빠른 시작](https://code.claude.com/docs/en/quickstart), [파일 참조 지침](https://code.claude.com/docs/en/common-workflows) 및 [프로젝트 지침 문서](https://code.claude.com/docs/en/memory)는 접근과 명시적 맥락을 설명합니다. 이번 페이지 수정이나 독립 자료의 자동 로딩을 검증하지 않습니다.
- Anthropic의 [비용](https://code.claude.com/docs/en/costs), [데이터 사용](https://code.claude.com/docs/en/data-usage) 및 [권한](https://code.claude.com/docs/en/permissions) 문서는 계정에 따른 사용과 제어를 설명합니다. 이 안내서에서는 세션, 청구서나 결과 페이지를 시험하지 않았습니다.

## Sources

- [Awesome DESIGN.md 고정 버전 README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — 불변 커밋의 저장소 주요 설명과 단일 파일 복사 지침입니다. 공개 사이트 분석을 있는 그대로 제공한다고 밝히며, 결과 품질 표현은 홍보 문구입니다. 독립 검토한 해당 커밋의 전체 트리에 직접 DESIGN.md 파일 84개가 있으며 버전 한정 수치입니다.
- [고정 커밋의 Notion DESIGN.md 예제](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) — 배치, 간격, 타이포그래피와 구성 요소의 분석 예제입니다. 캡슐형·직사각형 버튼 설명이 모순되고 검증된 마우스 올림·애니메이션 동작은 입증하지 않으며 미검증 코드 검사 명령을 제안합니다. 커뮤니티 분석이지 Notion 공식 브랜드 규격이나 자료 복사 허가는 아닙니다.
- [Awesome DESIGN.md MIT 라이선스](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Copyright (c) 2026 VoltAgent. 사본이나 상당 부분에는 저작권·허가 고지를 보존해야 합니다. 저장소 라이선스는 해당 사이트의 상표, 로고, 독점 글꼴이나 이미지의 권리를 입증하지 않습니다.
- [Claude Code 빠른 시작](https://code.claude.com/docs/en/quickstart) — 프로젝트, 계정 또는 제공업체, 로그인에 관한 공식 준비 조건입니다. 독자는 적격 경로와 본인 프로젝트를 사용해야 하며 BIG CHANGE는 Claude Code 설정이나 유료 계정을 시험하지 않았습니다.
- [Claude Code 일반 작업 흐름](https://code.claude.com/docs/en/common-workflows) — 명시적 @file 맥락과 프로젝트 작업의 공식 지침입니다. 설정과 한도에 따라 복사 파일을 의도적으로 참조하도록 뒷받침하며 임의 DESIGN.md의 자동 로딩은 아닙니다.
- [Claude Code 프로젝트 메모리](https://code.claude.com/docs/en/memory) — 프로젝트 지침 파일과 설정에 따른 로딩을 설명합니다. 독립 DESIGN.md가 저장소에 있다는 이유만으로 로딩된다고 입증하지 않으며 이 안내서는 지침 설정을 바꾸지 않습니다.
- [Claude Code 비용](https://code.claude.com/docs/en/costs) — 계정별 사용과 청구 배경입니다. Markdown 참고 파일은 패키지 의존성을 더하지 않지만 Claude Code 작업의 고정 가격, 무료 할당량이나 시간 절약을 입증하지는 않습니다.
- [Claude Code 데이터 사용](https://code.claude.com/docs/en/data-usage) — 계정별 공식 데이터 처리와 로컬 대화 기록 동작입니다. 소유자는 고객의 비공개 코드나 자료를 공유하기 전에 정책을 검토해야 하며, 일률적인 로컬 전용 처리나 학습 주장은 하지 않습니다.
- [Claude Code 권한](https://code.claude.com/docs/en/permissions) — 공식 도구 권한 제어입니다. 프롬프트 지시만으로 도구 접근을 허가하거나 강제하지 못하며, 독자는 제안 동작과 실제 변경 파일을 검사해야 합니다.