AI가 읽고 따르는 디자인 가이드

AI가 읽고 그대로 따를 수 있게 쓰는 앱·웹 화면 디자인 가이드입니다. 디자인 수업에서 배운 여백·그리드·글자·색·컴포넌트 규칙을 AI가 따를 수치와 명령문으로 다시 정리합니다. 여기에 직접 정한 규칙과 'AI 티 나는 디자인' 목록을 더해 씁니다.

가져갈 것

가이드에 직접 더한 한국어 줄바꿈 기본값입니다. 사이트 전체에 거는 CSS에 그대로 붙여 쓸 수 있습니다.

body { word-break: keep-all; overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li { text-wrap: pretty; }

이 세 줄을 넣으면 어절 중간에서 줄이 끊기지 않습니다. 제목은 줄 길이가 고르게 나뉘고 문단은 마지막 줄에 한 단어만 남지 않습니다. 이 사이트도 이 값을 씁니다.

쓰는 방식

독자가 AI인 문서라 AI가 같은 결과를 내게 쓰는 것을 기준으로 삼습니다.

규칙은 "보기 좋게"처럼 해석이 갈리는 말 대신 수치와 명령문으로 적습니다. AI가 만든 티가 나는 디자인은 따로 목록으로 모아 피할 것과 대신 쓸 것을 짝지어 둡니다.

직접 정한 기준 네 가지

가이드에 직접 써 넣은 문장을 그대로 옮겼습니다. 수업에서 배운 값과 문장은 넣지 않았습니다.

값이 부딪힐 때의 순서

프로젝트 확정 값(브랜드 가이드) > 이 문서의 실측 정본 > 제안값. 상위가 이기되, 문서의 구조 규칙(간격 체계·상태 구조·배치 원칙)은 유지한다.

이 사이트는 이 순서에 따라 가이드의 색 값 대신 브랜드 색을 쓰고 글자색 4단계와 간격 위계는 그대로 두었습니다.

'AI 티 나는 디자인' 목록을 쓰는 법

디폴트를 막으면 다음 디폴트로 옮겨 간다. 금지 목록으로 끝내지 말고 「왜 이 색·이 서체·이 구도인가」를 브랜드 근거로 설명할 수 있어야 한다.

목록의 한 항목인 세이프 그린 회귀가 그 예입니다. 보라색을 쓰지 말라고 하면 AI는 에메랄드 초록 한 톤으로 옮겨 가 버튼과 강조색을 칠합니다. 색만 바뀌었을 뿐 색을 고른 흔적이 없기는 마찬가지입니다. 목록은 디자인 글과 조사 자료에서 모았고 항목마다 출처를 붙여 둡니다.

이 사이트의 색은 금지 목록 대신 색마다 화면에서 맡는 일 한 문장으로 정했습니다.

값이 없을 때

값이 없을 때는 4px 배수와 인접 컴포넌트의 실측 체계에서 유도하고, 유도한 값은 「제안값」으로 표기해 남긴다.

가이드에 없는 움직임 값(지속 시간·곡선)은 지어내지 않고 참고 사이트에서 잰 값을 옮겨 쓴 뒤 출처를 함께 적었습니다.

한국어 줄바꿈 기본값

한국어는 어절 단위로 줄이 바뀌어야 읽힌다.

이 문장을 CSS로 옮긴 세 줄이 맨 위 "가져갈 것"에 있습니다.

가져갈 것: 한국어 줄바꿈 CSS 세 줄

이 사이트에 적용한 곳

이 사이트의 간격·글자·색 규칙은 이 가이드를 따릅니다. 벗어난 값은 따로 적었습니다.

여백과 간격: 여백과 간격(margin·padding·gap)은 4px 배수입니다. 섹션 사이 96px(좁은 화면 64px), 같은 섹션 안 묶음 사이 48px(좁은 화면 32px), 묶음 안은 4~16px입니다. 안쪽으로 갈수록 좁습니다.
크기 값: 글자 크기 13px·18px처럼 가이드의 크기표에 정해진 값은 4px 배수가 아니어도 그대로 썼습니다. 가이드가 직접 예외로 둔 값입니다. 가이드와 다르게 정한 주요 값은 아래 표에 있습니다.
글자색 4단계: 글자색은 4단계만 씁니다. 색 값은 가이드의 우선순위 규칙대로 이 사이트의 브랜드 값을 씁니다.
AI 티 목록: 화면 부품에는 그라데이션 버튼, 그림자 카드, 알약 모양 라벨, 왼쪽 세로 강조선, 이모지를 쓰지 않았습니다. 어두운 바탕 위에 형광색 글자나 빛 번짐도 두지 않았습니다.

가이드와 다르게 쓴 값

따르지 않은 값 가운데 화면에 크게 드러나는 다섯 가지를 이유와 함께 적었습니다.

이 사이트가 가이드와 다르게 쓴 값
항목	가이드	이 사이트	이유
바탕 밝기	밝은 바탕 기준(어두운 바탕 값은 정하지 않음)	어두운 바탕 먼저(글자색 4단계·간격 체계는 유지)	같은 일을 하는 사람이 오래 읽고 다시 오는 기록 사이트로 다시 잡으면서 어두운 바탕을 먼저 정했습니다. 어두운 바탕의 색 값은 가이드에 없어 무채색 숯색 단계를 새로 정했고, 브랜드 색은 버튼과 키보드 초점 표시 같은 작은 자리에만 씁니다.
본문 행간	16~28px 글자는 140%	170%(16px 글자에서 줄 높이 27.2px)	어두운 바탕에서는 밝은 글자가 실제보다 굵고 빽빽해 보입니다. 긴 한국어 문단을 넓은 화면에서 최대 844px 폭으로 읽을 때 줄 사이가 붙지 않게 했습니다.
글자·면 색 값	수업 자료에서 온 회색 값	브랜드 가이드북 값(4단계 구조는 유지)	가이드의 우선순위 규칙(프로젝트 브랜드 값이 앞섬)을 따랐습니다.
좌우 여백	좁은 화면 기준 그리드: 좌우 16px, 칸 사이 13px	모든 폭 좌우 20px, 칸 사이 16px(넓은 화면 28px)	칸 사이 13px는 4px 배수가 아니어서 16px로 올렸습니다. 좌우는 가이드가 고를 수 있게 둔 16·20·24px 가운데 20px 하나로 모든 폭에 맞췄습니다.
카드 격자 세로 간격	2열 이상 격자는 가로 간격과 같은 값에서 시작(제안값)	가로 28px(좁은 화면 16px), 세로 48px(좁은 화면 32px)	표지와 제목 사이를 가이드대로 20px로 두면 좁은 화면의 가로 간격 16px보다 커집니다. 카드 안 간격이 카드 사이보다 좁아야 묶음이 읽혀서 세로 간격을 키웠습니다.

기록 정보

상태: 하는 중 · 계속 추가
맡은 일: 디자인 수업에서 배운 규칙을 AI가 따를 명령문으로 다시 정리, 직접 정한 규칙과 'AI 티' 목록 추가(개인 작업)
AI에게 맡긴 일: 가이드를 읽고 이 사이트의 화면 코드 작성
마지막 확인: 2026년 10월