55개 파일의 회색을 처음 통일했다

이 글은 2026년 9월에 당시 커밋 이력을 다시 보며 정리한 것입니다. 날짜는 작업한 날 기준입니다.

2025년 9월 19일 금요일 오후, 이런 제목의 커밋을 올렸습니다.

fix : 보조 제목 변경 , 테이블 정렬 재배치, gray 배치 통일
 55 files changed, 276 insertions(+), 270 deletions(-)

세 가지 일을 쉼표로 이어 붙인 제목입니다. 그 무렵 화면을 열어 보면 표마다 정렬이 다르고, 상세 화면 위의 설명 한 줄이 "○○을 조회합니다"로 끝나고, 회색 아이콘이 어떤 데는 흐리고 어떤 데는 진했습니다. 다섯 달 동안 화면을 하나씩 만들면서 그때그때 고른 값이 쌓인 결과예요.

실제로 바뀐 것

제목 순서와 diff의 비중이 다릅니다.

정렬은 이런 식이었습니다. 목록 화면마다 열 정렬을 배열로 넘기는 구조였는데, 전부 가운데 정렬이던 것을 글자 열은 왼쪽으로 바꿨어요.

-          {% set field_align = ["c", "c", "c", "c", "c"] %}
+          {% set field_align = ["l", "l", "l", "c", "c"] %}

이름·제목·URL은 왼쪽, 공개 여부 같은 짧은 값은 가운데. 이 규칙을 91곳에 손으로 적용했습니다. 규칙을 배열 기본값으로 올리지 않고 화면마다 배열을 고친 거예요.

보조 제목은 뷰에서 넘기는 한 줄 설명이었습니다.

                 _("메타데이터 클래스 속성 정보"),
-                _("메타데이터 클래스 속성을 조회합니다."),
+                _("해당 메타데이터 클래스의 이름, 정의, 도메인 등 속성 정보를 확인할 수 있습니다."),

"조회합니다"는 화면 제목을 동사로 바꿔 놓은 것뿐이라 정보가 없었습니다. 무엇을 볼 수 있는지로 바꿨어요.

회색은 눈으로 골랐다

제목에 "gray 배치 통일"이라고 썼지만 실제로는 서너 곳입니다.

-            <i class="fas fa-question-circle text-[4rem] text-gray-400"></i>
+            <i class="fas fa-question-circle text-[4rem] text-gray-500"></i>

돋보기 아이콘, 물음표 아이콘, 흐린 제목 글자, 그리고 상세 화면의 좌우 구획을 나누는 세로선. gray-400이 너무 옅어 보여서 한 단계 올렸습니다. 대비 수치는 재지 않았습니다. 어떤 회색이 배경 대비 몇 대 몇인지 그때는 몰랐고 알아볼 생각도 못 했어요. 옆에 있는 파란색·검정과 나란히 놓고 눈으로 봤습니다.

같은 날 한 시간 전에는 아코디언 토글 아이콘도 손봤습니다. 16px 회색을 24px 파란색으로. 이것도 같은 기준이었어요. 안 보이면 키우고 진하게.

1년 뒤

2026년 8월에 팔레트 밖 색 클래스 142곳을 정리하면서 처음으로 대비를 쟀습니다. 그때 회색 램프가 한 칸 밝게 정의돼 있어서 gray-500이 흰 배경 대비 2.6:1이라는 걸 알았어요. 9월에는 TV에 연결하니 테두리가 안 보인다는 제보로 회색 테두리 94개 파일을 다시 올렸고, 장식은 gray-500(2.60:1), 정보를 나르는 선은 gray-600(4.71:1)으로 기준을 세웠습니다.

그러니까 2025년 9월에 눈으로 고른 gray-500은 1년 뒤 세운 "장식의 최소선"과 같은 값이었습니다. 우연입니다. 근거가 달랐어요. 그때는 "옆 색과 견줘 덜 흐린 것"이었고, 1년 뒤는 "수치로 2.6 이상"이었습니다. 같은 값이라도 다음 사람이 이어받을 수 있는 건 수치 쪽입니다. 2025년의 결정은 제가 왜 400이 아니라 500을 골랐는지 커밋에 한 줄도 없어서, 이 글을 쓰며 diff를 보고 거꾸로 짐작한 겁니다.

검증

• 그날은 화면 몇 개를 열어 정렬과 색을 눈으로 봤습니다. 55개 파일을 다 열어 보지는 않았을 겁니다. 기록이 없습니다.
• 이 글을 쓰며 확인한 것: diff에서 field_align 변경 줄 수, text-center·text-left 추가 수, gray- 변경 줄과 그 값, 뷰 4곳의 문구 diff.
• 대비 수치 2.60:1·4.71:1은 2026년 9월 커밋 본문에서 가져온 것입니다. 2025년 9월 커밋에는 수치가 없습니다.

남은 것 · 한계

• 정렬 규칙을 91곳에 손으로 적용했습니다. 배열 기본값을 바꾸면 한 곳으로 끝날 일을 화면마다 고쳤고, 그 뒤 새로 만든 화면이 같은 규칙을 따랐는지는 보장이 없습니다.
• 회색 서너 곳은 "통일"이 아니라 눈에 띈 곳만 고친 것입니다. 같은 gray-400이 다른 화면에 남아 있었는지 그날 세지 않았습니다.
• 대비를 재지 않은 건 몰라서였습니다. 1년 뒤에야 도구를 알았고 그때 이 커밋의 회색이 다시 도마에 올랐습니다.
• 커밋 제목 세 항목 중 가장 작은 일을 가장 큰 것처럼 적었습니다. 제목만 보고 "회색을 통일한 커밋"으로 찾으면 서너 곳밖에 안 나옵니다.

관련 글: 팔레트에 없는 색은 조용히 안 칠해진다 — 색 클래스 142곳 정리와 대비 감사2026-08-24팔레트에 없는 색은 조용히 안 칠해진다 — 색 클래스 142곳 정리와 대비 감사토큰에 없는 색 이름은 빌드 오류가 아니라 그냥 안 칠해집니다. 그렇게 죽어 있던 클래스 142곳을 토큰으로 바꾸고, 다시 들어오면 빌드를 세우는 가드를 붙였어요. 이어서 팔레트 안에 있는 색들의 명도 대비를 재봤더니 회색 스케일이 통째로 한 칸 밝아 입력 경계와 회색 글자가 기준 미달이었습니다. 못 고치기로 한 35곳도 이유와 함께 적었습니다. · TV에 연결하니 테두리가 안 보였다2026-09-04TV에 연결하니 테두리가 안 보였다 — 열흘 전 "일부러 안 고침"을 94개 파일에서 뒤집은 기록열흘 전 대비 감사에서 회색 테두리 260곳은 장식이라 일부러 안 고쳤습니다. 그런데 고해상도 TV에 HDMI로 확장해 띄우니 표 격자와 카드 테두리가 통째로 사라졌어요. 장식은 gray-500, 관계를 나타내는 연결선은 gray-600으로 94개 파일을 올렸고, 그때 세워 둔 기준이 어디서 틀렸는지를 적습니다. · Tailwind CSS 정리 — 그리고 이 글이 틀렸던 것2025-04-22Tailwind CSS 정리 — 그리고 이 글이 틀렸던 것: 클래스 순서는 우선순위가 아니다Tailwind의 단위·색상·레이아웃·반응형을 정리한 레퍼런스입니다. 개고하며 원문을 검증하다 큰 오류를 발견했어요 — "같은 속성은 마지막 클래스가 우선"이라는 전제로 우선순위 절 전체를 썼는데, CSS는 class 속성 안의 순서를 아예 보지 않습니다. 왜 그 오해가 생기는지, 진짜 규칙과 tailwind-merge가 존재하는 이유까지 정정했습니다. · 검색 화면 시안 넷을 만들었고 여덟 달 뒤 전부 지워졌다2025-08-08검색 화면 시안 넷을 만들었고 여덟 달 뒤 전부 지워졌다 — 시안이 남긴 것과 남기지 못한 것입사 넉 달째, 검색 화면이 어떤 모양이어야 할지 정해진 게 없어서 가짜 데이터로 시안 넷을 만들었습니다. 열흘 뒤 팀원이 그중 셋에 실제 데이터를 연결했고, 하나는 끝내 연결되지 않았어요. 여덟 달 뒤 제가 그 앱을 통째로 지웠습니다. 시안이 최종 화면에 무엇을 남겼는지는 코드로 이을 수 없었습니다. · 1920px 고정 폭에서 100vw로2024-10-191920px 고정 폭에서 100vw로 — "1980 결정 전"이라는 커밋 제목디자인 시안이 1920px 기준이라 화면 폭을 max-width 1920px로 잡아 두고 있었습니다. 8월에 "1980 결정 전"이라는 제목으로 온보딩 이미지를 1980px 고정으로 바꿨는데, 1980은 1920의 오타였어요. 두 달 뒤 해상도 이슈로 전부 100vw로 바꿨고, 그게 다음 문제의 시작이었습니다.