프로덕트 / 협업

design.md

design.md는 프로젝트의 디자인 원칙, UI 규칙, 구현 기준을 마크다운으로 정리해 사람과 AI가 함께 참고하는 문서입니다.

쉬운 설명

프로젝트의 디자인 원칙, UI 규칙, 구현 기준을 마크다운으로 정리한 문서.

배경과 쓰임까지 이해하기

조금 더 자세히

design.md는 프로젝트가 어떤 디자인 원칙과 UI 규칙을 따라야 하는지 적어두는 마크다운 문서입니다. 색상과 간격, 버튼 사용법, 모바일 동작, 접근성 기준을 저장소 안에 기록하면 개발자와 AI 코딩 도구가 같은 기준을 참고할 수 있습니다.

다만 널리 강제된 표준 파일은 아니므로 프로젝트에 맞게 만들고 실제 구현과 함께 갱신해야 합니다. 한마디로, design.md는 프로젝트의 디자인 결정을 코드 가까이에 적어두는 안내서입니다.

실제로는 이렇게 만나요

색상 사용 원칙, 버튼 종류, 여백 기준, 모바일 동작, 금지할 UI 패턴을 `design.md`에 기록할 수 있습니다.

  • 이런 거 할 때 나와요 사람과 AI 코딩 도구가 같은 디자인 기준을 참고하면 화면마다 스타일과 사용 방식이 달라지는 문제를 줄일 수 있습니다.
  • 이렇게 생겼어요 design.md은(는) Design System, Design Token, UI/UX 같은 주변 개념과 함께 문서, 설정 화면, 오류 메시지에서 자주 보입니다.
  • 나오는 화면 예시 프로덕트 / 협업 작업을 하다가 Design System, Design Token, UI/UX를 확인하는 화면

헷갈리기 쉬운 점

파일 이름 자체가 표준 규격은 아닙니다. 문서를 만들기만 하고 실제 코드와 동기화하지 않으면 금방 오래된 기준이 됩니다.

왜 알아두면 좋을까요?

사람과 AI 코딩 도구가 같은 디자인 기준을 참고하면 화면마다 스타일과 사용 방식이 달라지는 문제를 줄일 수 있습니다.

Checklist

실제로 볼 때 확인할 것

  1. 01

    핵심 디자인 원칙을 짧게 적는다

  2. 02

    컴포넌트와 토큰 위치를 연결한다

  3. 03

    구현 변경 시 문서도 갱신한다

관계 지도