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

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

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

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

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

실제로 바뀐 것

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

제목의 항목	diff에서	비중
테이블 정렬 재배치	`field_align` 배열 `"c"`→`"l"` 91곳, 셀에 `text-center` 20곳·`text-left` 10곳	가장 큼
보조 제목 변경	뷰 4곳의 설명문	작음
gray 배치 통일	`gray-400`→`gray-500` 3곳, 구획 경계 `border-r-gray-500`	가장 작음

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

-          {% 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년 뒤에야 도구를 알았고, 그때 이 커밋의 회색이 다시 도마에 올랐습니다.
커밋 제목 세 항목 중 가장 작은 일을 가장 큰 것처럼 적었습니다. 제목만 보고 "회색을 통일한 커밋"으로 찾으면 서너 곳밖에 안 나옵니다.