개인 사이트 다시 만들기 (1) — 같은 헤더 45줄이 다섯 파일에 복사돼 있었다

회색 밤하늘 배경에 2021, Happy New Year, LYSCompany 라고 적힌 가로로 긴 배너 이미지 — 이번에 만든 배너. 저장소에는 넣어 뒀는데 아직 어느 페이지에도 붙이지 않았다.

석 달 동안 이 사이트를 만들었다. 당분간 손을 놓게 될 것 같아서, 그 전에 무엇을 했고 무엇이 잘못돼 있는지 정리해 둔다. 다음에 다시 열었을 때 처음부터 헤매지 않으려는 목적이다.

기억에 의존하면 미화된다. 그래서 커밋 로그를 파일로 뽑아 놓고 그것만 보고 썼다.

git log --reverse --date=iso \
        --pretty=format:"=== %h | %ad | %s" \
        --name-status

커밋 61개. 1월 10일부터 오늘까지다.

시작은 개인 사이트가 아니었다

첫 커밋은 1월 10일 23시 24분, 메시지는 Initial commit, 들어 있는 파일은 README.md 하나다. 44초 뒤 다음 커밋에 index.html 과 project-1.html · project-2.html · project-3.html 이 한꺼번에 들어간다.

그 뒤 커밋 메시지가 이렇게 이어진다. test - 1 → test-1-2 → test1-1 → test → test-1-1. 규칙이 없다. 목적이 메시지에 드러나는 건 일곱 번째에 가서다.

9bec470  2021-01-12 01:13  CarOpenWorld-Website-test-0.0.1

자동차 오픈월드 게임 하나를 소개하는 사이트로 시작한 것이다. 닷새 뒤 커밋 메시지를 My page - 0.1.0 · My Web - 0.1.0 으로 바꿨다. 개인 사이트로 넓히려는 생각이었다. 그런데 지금 index.html 을 열어 보면 이렇다.

<title>CarOpenWorld - HomePage</title>
...
<h1 class="top-1-1"><a href="index.html"> 자동차 오픈월드 </a></h1>

<div class="top_menu">
  <a href="project-1.html">• 게임설명</a>
  <a href="project-2.html">• 게임 업데이트</a>
  <a href="project-3.html">• 게임 내 3d모델 모음</a>
  <a href="project-4.html">• 사이트 업데이트 내용</a>
</div>

바뀐 건 커밋 메시지뿐이었다. project-N 도 프로젝트 목록이 아니라 게임 소개 사이트의 메뉴 항목이다. 이름만 개인 사이트고 내용은 그대로다.

커밋 메시지는 의도를 적고, 파일은 결과를 적는다메시지를 바꾸는 건 5초면 되고 파일을 바꾸는 건 하루가 걸린다. 그래서 메시지만 앞서 나간다. 둘이 어긋날 때 믿을 것은 파일이다.

같은 45줄이 다섯 벌 있다

다섯 파일에서 맨 위 45줄(<!doctype html> 부터 메뉴 블록까지)만 잘라 해시를 찍어 봤다.

파일	상단 45줄 해시(앞 6자리)
index.html	899036
project-1.html	d8dace
project-2.html	8a3c27
project-3.html	8a3c27
project-4.html	3f18ee

네 종류가 나온다. 그런데 diff 를 돌려 보면 다른 것은 들여쓰기 두 칸과 줄 끝 공백뿐이고 내용은 완전히 같다. 한 번 복사해 붙인 다음 파일마다 따로 손대면서 공백만 어긋난 것이다. 이 45줄만 놓고 보면 project-2.html 과 project-3.html 은 바이트 단위로 완전히 같다.

커밋 통계도 같은 말을 한다. 61개 커밋에서 각 파일이 등장한 횟수다.

파일	등장한 커밋 수
index.html	41
project-3.html	36
project-1.html	35
project-2.html	35
Website-1.css	14
project-4.html	13

네 파일의 숫자가 거의 같다는 것이 곧 같은 변경을 네 번 반복했다는 뜻이다. 1월 26일 23시 00분의 커밋 하나는 다섯 파일을 한꺼번에 수정하고 끝난다. 바뀐 내용은 한 가지였다. 메뉴에 항목 하나를 더하면 다섯 곳을 고쳐야 하고, 그중 하나를 빠뜨리면 그 페이지만 옛 메뉴가 남는다.

공통을 빼려는 시도가 없었던 건 아니다. 1월 14일에 Website-1.css 를 만들어 스타일을 모았고 그 뒤로 14번 고쳤다. 하지만 CSS 로 뺄 수 있는 것은 겉모습뿐이고, 실제로 반복되는 건 HTML 구조 자체다. 헤더와 메뉴는 여전히 다섯 벌이다.

규칙은 만드는 것보다 지키는 게 어렵다공용 CSS 파일을 만들어 두고도 같은 index.html 안에 style="..." 이 8군데 남아 있다. 급하면 태그에 직접 쓰게 된다. 규칙을 지키게 만드는 구조가 없으면 규칙은 안 지켜진다.

브랜치 대신 파일을 복사하고 있었다

실험을 남기는 방법도 전부 파일 이름이다.

index(beta).html — 1월 22일에 만들어 사흘 동안 세 번 고치고 24일에 지웠다
Test.html · Test copy.html · Test copy 2.c · test2.html
ex/ex1.html ~ ex/ex10.html — 연습용 10개. 처음엔 루트에 있다가 1월 19일에 ex/ 로 옮겼다
LYSC+개인+정보+처리+방침.html — 공백이 + 로 치환된 채 그대로 저장된 파일

git 을 쓰면서 브랜치는 한 번도 안 썼다. 버전 관리 도구를 켜 둔 채로 버전 관리는 파일 이름으로 하고 있는 셈이다. index(beta).html 도 어차피 커밋에 다 남는데 굳이 파일로 남길 이유가 없었다.

1월 24일에는 3d model web/(three.js 뷰어)과 3d Model/신맵 건물.fbx 를 넣었다. 게임 맵의 건물을 웹에서 돌려 보려던 것인데 아직 사이트 어디에도 연결하지 않았다.

하루에 CNAME 을 일곱 번 건드렸다

1월 12일에는 커밋이 21개 있다. 그중 일곱 개가 이것이다.

11:44  Create CNAME
11:45  Delete CNAME
11:48  Create CNAME
12:49  Delete CNAME
12:52  Create CNAME
17:15  Update CNAME
17:25  Update CNAME

석 달 통틀어 CNAME 은 아홉 번 등장한다. 도메인이 붙지 않아서 만들었다 지웠다를 반복한 기록이다.

DNS 는 바꾼 뒤 기다려야 반영된다. 1분 뒤에 지우고 3분 뒤에 다시 만들면, 나중에 붙었을 때 무엇이 효과가 있었는지 알 수가 없다. 다음부터는 한 번 바꾸고 최소 몇십 분은 손을 떼기로 한다.

다크 모드를 만들었는데 두 분기가 똑같다

배경색을 바꾸는 버튼을 붙였다. script-body.js 89줄이 jQuery 로 요소를 골라 색을 하나씩 덮어쓰는 방식이다.

<input id="bodyColorBtn_1" type="button" class="_btn-1" value="Dark"
       onclick="DarkwhiteHandler(this, id);">

function DarkwhiteHandler(self, id_1){
  if(self.value === 'Dark'){
    alert('아직 불안정한 Dark모드 입니다.');

    Body.bodySetBackGroundColor('black');
    Body.setColor('white');
    Links.setColor('white');
    A.hrefSetColor('yellow');
    H1.h1HrefSetColor('black');   // ← 검은 배경 위에 검은 글씨
    ...
  }else{
    Body.bodySetBackGroundColor('white');
    Body.setColor('black');
    Links.setColor('black');
    A.hrefSetColor('yellow');     // ← 밝은 모드에서도 노란 글씨
    H1.h1HrefSetColor('black');
  }
}

두 갈래를 나란히 놓고 보면 문제가 보인다. A.hrefSetColor('yellow') 와 H1.h1HrefSetColor('black') 이 양쪽에 똑같이 들어 있다. 밝은 모드에서도 메뉴가 노란색이고, 어두운 모드에서는 사이트 제목이 검은 배경 위의 검은 글씨가 된다. 안 보인다는 뜻이다.

모르고 있던 것도 아니다. 버튼을 누르면 "아직 불안정한 Dark모드 입니다" 라는 경고창부터 뜬다. 불안정한 걸 알면서 고치는 대신 경고를 붙여 놨다.

요소마다 색을 칠하면 반드시 빠지는 조합이 생긴다지금 방식은 분기마다 모든 요소를 빠짐없이 적어야 한다. 요소가 늘면 적을 곳도 늘고, 한 줄만 빠지면 글자가 배경에 묻힌다. 색은 코드로 지정할 게 아니라 상태(밝음/어두움)를 하나만 바꾸고 나머지는 CSS 가 따라오게 만들어야 한다.

다음에 열면 여기부터

지금 상태에서 확실하게 말할 수 있는 문제는 넷이다.

헤더와 메뉴가 다섯 벌이다. 한 곳에서 관리되게 바꿔야 한다. 손으로 다섯 번 고치는 건 언젠가 반드시 하나를 빠뜨린다
실험을 파일 이름으로 남기고 있다. Test copy 2.c 같은 것부터 지우고, 브랜치를 쓰자
다크 모드가 두 분기 모두 같은 색을 칠한다. 요소별로 칠하는 구조 자체를 바꿔야 한다
커밋 메시지에 규칙이 없다. test-1-1 과 0.2.0(세 번 반복)으로는 나중에 아무것도 못 찾는다

세는 것만으로 보이는 게 있다석 달 동안은 "파일이 많아서 좀 번거롭다" 정도로만 느끼고 있었다. git log --name-status 로 같이 바뀌는 파일을 세어 보니 그게 감각이 아니라 숫자였다. 항상 함께 수정되는 파일 묶음이 있다면, 그 묶음은 원래 하나였다는 뜻이다.

당분간은 여기까지다. 다시 열게 되면 위 네 가지부터 손본다.