GITING 매거진 · AI 티 나는 화면, 벗기기← 전체 호
GITING 매거진 · VOL.10 · 디자인 편
모니터에 붙은 보라·파랑 그라데이션 스티커를 기티가 한쪽 귀퉁이부터 떼어 내자, 아래로 흰 바탕에 구분선만 있는 할 일 목록이 드러난다.

AI 티 나는 화면,
벗기기

디자인을 안 시키면 AI는 기본값으로 채운다. 기본값이 들어오는 자리는 대개 여섯이다.

6AI 티가 나는 자리
5기본값 판이 걸린 수
1화면에 둘 카드
0벗긴 판이 걸린 수
두 판01

왜 다 비슷해 보일까

같은 할 일 화면이에요. 가운데 선을 옆으로 밀어 보세요.

기본값 켠 판 · 검사 5개 걸림벗긴 판 · 걸림 없음

두 판 모두 Giting이 직접 만든 예시예요. 왼쪽은 흔한 기본값(보라 그라데이션, 이모지, 기본 색, 기본 글꼴, 전부 카드)을 일부러 켰어요.

기본값 여섯02

AI 티는 대개 이 여섯에서 난다

왼쪽이 흔한 기본값, 오른쪽이 벗긴 것. 아래 한 줄이 대신 시키는 말이에요.

G1보라·파랑 그라데이션

이번 주 할 일
이번 주 할 일

대신 「배경은 한 색, 강조색은 한 군데에만」

G2이모지를 아이콘으로

💼 업무
🔥 지금 할 일
✅ 끝냈어요
업무
지금 할 일
끝냈어요

대신 「아이콘은 선 아이콘(SVG)이나 글자만, 이모지는 본문에만」

G3프레임워크 기본 색

끝냈어요
#4f46e5 indigo-600
끝냈어요
#1d1d24 · 강조 #c2185b

대신 「색은 DESIGN.md에서 정한 값만 쓰고 hex로 적어 줘」

G4기본으로 고른 글꼴

이번 주 할 일
Inter (한글은 시스템 글꼴로 대체)
이번 주 할 일
Black Han Sans (제목에만)

대신 「제목 글꼴 하나를 이 제품에 맞게 골라 이유와 같이 적어 줘」

G5크림 바탕 + 테라코타

끝냈어요
#faf5ec + #c4633f
끝냈어요
#ffffff + #1d1d24

대신 「바탕은 흰색이나 회색, 따뜻한 톤은 이유가 있을 때만」

G6전부 카드

견적서 보내기
회의록 정리
장보기
견적서 보내기
회의록 정리
장보기

대신 「카드는 제일 중요한 하나만, 나머지는 여백과 구분선으로」

여섯 가지는 design-brief 검사기(slop_check)가 세는 항목과 같아요. 5장에서 이 검사기를 돌려요.

카드03

카드는 한 장만

여섯 중에 제일 눈에 띄는 것이 「전부 카드」예요.

「전부 카드」(상자 13개)와 「카드 한 장 + 여백」이 번갈아 나와요. 두 판 모두 Giting이 만든 예시예요.

두 조각은 UI 메뉴판에 있는 실물 그대로예요.

요청 문장04

시키는 말을 바꾼다

「깔끔하게」는 고를 근거가 아니에요. 근거를 주면 기본값이 들어올 자리가 없어져요.

바꾸기 전「할 일 앱 첫 화면 만들어줘. 깔끔하고 모던하게.」
바꾼 뒤할 일 앱 첫 화면 만들어줘.
  1. 바탕은 흰색 한 색, 강조색은 #c2185b 하나를 「오늘」 표시에만.
  2. 아이콘은 선 아이콘이나 글자만, 이모지는 쓰지 마.
  3. 제목 글꼴은 하나만 골라서 이유를 같이 적어 줘.
  4. 카드는 맨 위 「지금 할 일」 하나만, 나머지는 여백과 1px 구분선으로 묶어.

기본값이 들어온 화면

네 줄이 막은 화면

두 화면은 이 문장을 AI에게 보내 받은 결과가 아니라, 문장이 무엇을 막는지 보이려고 Giting이 직접 만든 예시예요.

매번 쓰기 귀찮으면 DESIGN.md 한 장

네 줄을 프로젝트 폴더에 파일로 두면 요청마다 안 적어도 돼요. 시킬 때 「DESIGN.md 따라서」 한마디면 돼요.

DESIGN.md 예시# DESIGN.md · 이번 주 할 일 ## 색 - 바탕 #ffffff, 글자 #1d1d24, 흐린 글자 #8a8a96 - 구분선 #ececf1 - 강조 #c2185b 하나. 「오늘」 마감과 지금 할 일 라벨에만 (보라·파랑 그라데이션, 크림 바탕 쓰지 않음) ## 글자 - 본문 시스템 글꼴, 제목 26px 굵게 - 글꼴을 새로 넣을 땐 이유를 한 줄 적는다 ## 아이콘 - 선 아이콘(SVG)이나 글자. 이모지는 본문에만 ## 묶기 - 카드는 화면에 하나: 지금 할 일 바탕 #f6eff1, 모서리 16px, 안쪽 여백 18px - 나머지는 여백으로 묶는다 묶음 사이 34px, 행 사이 1px 구분선 (테두리+그림자 상자를 늘어놓지 않음)
값은 위 오른쪽 화면에 실제로 쓴 것과 같아요. 색과 크기만 바꿔 쓰세요.
검사05

다 짓고 나서 한 번 검사

DESIGN.md에 적어도 AI가 다 지키지는 않아요. 1장의 두 판을 검사기에 그대로 넣어 봤어요.

화면의 글은 실제로 돌린 출력 그대로예요. 걸리면 끝에 1을 돌려줘서, Claude가 걸린 것을 고치고 다시 돌리게 돼요.

쓰는 법

/plugin marketplace add hanmariyang/giting-skills
/plugin install design-brief@giting

설치하고 화면을 지어 달라고 하면, design-brief가 DESIGN.md를 먼저 쓰고 다 지은 페이지에 검사기를 돌려요. 「걸린 것 없음」이 나올 때까지가 일이에요.

일부러 카드 그리드로 만든 화면(상품 목록 같은)이면 --allow 'g6'로 끄고 이유를 적어요.

1분 체크리스트

고른 흔적이 남으면,
AI 티는 빠진다.
모니터 옆에서 스티커 귀퉁이를 잡은 기티
기티의 한마디. 스티커는 붙이기 전에 고르는 게 제일 쉬워요. 떼는 건 그다음이에요.