로그인 화면 하나에 오후 내내 걸렸습니다

오후 5시 18분에 커밋하고 45분에 네 번째 커밋을 올렸다. saegim-works 로그인 화면, 27분. 요소가 세 개뿐인 화면이 왜 이랬는지 순서대로 적는다.

오로라를 깔고 걷었다

오른쪽 패널이 너무 비어 보였다. Google 버튼 하나, 위에 로고 하나, 그게 전부였다. 배경이 민무늬 흰 면이니 여백이 빈 종이로 읽혔다.

그래서 오로라를 깔았다. 색이 아주 옅게 번지는 그라디언트, 정지 상태로. 세기를 두 번 올리고 자리를 한 번 옮겼다가 되돌리기까지 했는데, 고칠수록 안 맞는 느낌이 강해졌다.

문제는 세기나 자리가 아니었다. 왼쪽 판이 이미 비주얼을 다 맡고 있었다. 40초 주기로 드리프트하는 건물 사진. 오른쪽까지 색을 쓰면 화면에 주인공이 둘이 된다. 정작 눌러야 하는 버튼 하나가 그 사이에서 묻힌다.

5380c54에서 --sg-bg-aurora 토큰을 제거하고 오른쪽 판 배경을 --sg-bg-page로 바꿨다. 흰 면으로.

오로라가 여전히 본문 화면(내용이 있는 일반 페이지)에는 남아 있는데, 거기는 옆에 사진 판이 없으니 사정이 다르다. 두 판단이 어긋난 게 아니다.

제목을 세웠다가 뺐다, 세 번째로

버튼 위가 비어 있었다. d9a0f43에서 "업무 시스템 접속"이라는 한 줄을 버튼 위에 세웠다. 버튼이 "Google 계정으로 로그인"이라 말하니, 이 줄은 "어디로 들어가나"를 말한다고 판단했다. 겹치는 낱말이 없다는 것을 확인하고 넣었다.

그런데 넣고 나서 왼쪽 판을 봤다. "새김스튜디오 대내 업무 시스템"이라고 쓰여 있었다.

한 화면에 같은 말이 두 번이었다. 오른쪽만 보고 고쳤더니 왼쪽이 이미 한 말을 몰랐다. 1d84514에서 <h1> 태그를 지우고 .sr-only h1을 복구했다. Logo도 Wordmark도 span이라 문서 제목이 되지 못하니 보조 기술 사용자를 위한 숨김 제목은 있어야 한다.

이 자리의 기록:

「로그인」                         버튼과 같은 말 → 2026-08-05 제거
「새김스튜디오 Google 계정으로…」  버튼과 같은 말 → 같은 날 제거
「업무 시스템 접속」               왼쪽 판과 같은 말 → 2026-09-01 제거

세 번 세웠다가 세 번 다 뺐다. 이 자리에 다시 제목을 세우려면 왼쪽 판도 버튼도 안 하는 말이어야 한다. 코드 주석에 그 조건을 적어뒀다.

버튼을 3rem 내렸다

마지막 커밋(7a0b940)은 버튼 위치였다. 오른쪽 패널 콘텐츠를 위에서 42% 지점에 두고 있었다. "기하학적 중앙은 눈에 조금 아래로 보인다"는 규칙에서 나온 수치다.

그런데 이 화면은 위에 마크 락업 하나만 있고 아래가 통째로 비어 있다. 그러자 버튼이 그 빈 아래쪽에 눌려 떠 있는 것처럼 보였다. 그 규칙은 덩어리가 판을 어느 정도 채울 때의 이야기였다. 위에 요소 하나뿐이고 아래가 텅 비면 규칙이 반대로 읽힌다.

margin-top: 3rem으로 내렸다. px이 아니라 rem이다. 이 프로젝트에는 뷰포트 폭에 따라 루트 폰트 크기를 키우는 사다리가 있어서, px로 박으면 4K 화면에서 48px 그대로라 안 내려간 것처럼 보인다. 규칙에 주석이 있어서 알았다.

오른쪽만 봤다

27분 동안 네 번 고쳤는데, 그중 가장 단순한 실수는 제목이었다.

"업무 시스템 접속"을 버튼 위에 넣을 때 오른쪽 패널에서는 겹침을 확인했다. 버튼은 "어떻게 들어가나"를 말하고 이 줄은 "어디로 들어가나"를 말하니 겹치는 낱말이 없다고 봤다. 맞았다.

그런데 왼쪽 판이 "새김스튜디오 대내 업무 시스템"이라고 이미 써 있었다.

오른쪽을 고치는 중이었으니 오른쪽 안에서만 확인했다. 두 판이 한 화면인데 한쪽만 봤다. 코드로 치면 지금 편집 중인 함수 안에서는 변수를 다 확인했는데 호출하는 쪽에서 같은 이름이 있다는 걸 몰랐던 셈이다.

이 자리에 제목을 다시 세우려면 왼쪽 판도 버튼도 안 하는 말이어야 한다. 조건을 코드 주석에 적어뒀다(1d84514).