개인 사이트 다시 만들기 (1) — 같은 헤더 45줄이 다섯 파일에 복사돼 있었다Rebuilding My Personal Site (1) — The Same 45-Line Header Was Copied Across Five Files

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

I spent three months building this site. Since I am about to set it aside for a while, I want to write down what I built and what is currently broken. That way, when I open this repo again later, I will not have to figure it out from scratch.

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

Memory tends to flatter the past. So I dumped the commit log to a text file and wrote this post looking only at that.

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

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

61 commits in total, from January 10 up to today.

시작은 개인 사이트가 아니었다It Did Not Start as a Personal Site

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

The first commit was on January 10 at 23:24 with the message Initial commit, containing only README.md. Forty-four seconds later, the next commit added index.html, project-1.html, project-2.html, and project-3.html all at once.

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

After that, the commit messages go like this: test - 1 → test-1-2 → test1-1 → test → test-1-1. No naming rule at all. The actual purpose of the repo only shows up on the seventh commit.

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

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

It started as a site introducing a single open-world driving game. Five days later, I changed the commit messages to My page - 0.1.0 and My Web - 0.1.0, intending to expand it into a personal website. Yet if you open index.html right now, here is what is inside:

<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 도 프로젝트 목록이 아니라 게임 소개 사이트의 메뉴 항목이다. 이름만 개인 사이트고 내용은 그대로다.

Only the commit messages changed. project-N is not a list of projects either—those are menu items for the game's promo site. It is a personal site in name only; the markup is still the game page.

같은 45줄이 다섯 벌 있다Five Copies of the Same 45 Lines

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

I sliced the top 45 lines (from <!doctype html> down to the navigation menu block) out of all five HTML files and hashed them.

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

Four distinct hashes come back. But if you run diff, the only differences are two spaces of indentation and trailing whitespace—the actual content is identical. I copy-pasted the block once, and then nudged whitespace while editing each file separately. Across those 45 lines, project-2.html and project-3.html are byte-for-byte identical.

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

The commit statistics tell the same story. Here is how many times each file appears across the 61 commits:

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

Those four files having almost the exact same commit count means I repeated the same edit four times. One commit at 23:00 on January 26 touches all five files and nothing else—just to make a single change. Adding one item to the menu meant editing five files by hand, and forgetting one left that page stuck with an outdated menu.

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

I did try extracting shared code. On January 14, I created Website-1.css to centralize styles and modified it 14 times after that. But CSS only extracts appearance; what was actually being repeated was the HTML structure itself. There are still five copies of the header and menu.

브랜치 대신 파일을 복사하고 있었다Copying Files Instead of Using Branches

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

Every experiment I ran is also preserved purely through filenames.

• 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 — 공백이 + 로 치환된 채 그대로 저장된 파일

• index(beta).html — created on January 22, edited three times over three days, deleted on the 24th
• Test.html · Test copy.html · Test copy 2.c · test2.html
• ex/ex1.html ~ ex/ex10.html — ten practice files, originally in the root before moving to ex/ on January 19
• LYSC+개인+정보+처리+방침.html — saved with spaces literally replaced by + characters

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

Despite using Git, I never once created a branch. I had a version control system running, yet I was doing version control by duplicating filenames. There was no reason for index(beta).html to exist as a separate file when Git history was already recording every change.

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

On January 24, I committed 3d model web/ (a Three.js viewer) and 3d Model/신맵 건물.fbx. I wanted to spin a 3D building from my game map in the browser, though it is still not linked from anywhere on the site.

하루에 CNAME 을 일곱 번 건드렸다Touching CNAME Seven Times in One Day

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

There are 21 commits on January 12 alone. Seven of them look like this:

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 은 아홉 번 등장한다. 도메인이 붙지 않아서 만들었다 지웠다를 반복한 기록이다.

Across the three months, CNAME shows up nine times. The custom domain was not resolving, so I kept creating and deleting the file.

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

DNS changes take time to propagate. If you delete the file after one minute and recreate it three minutes later, you have no way of knowing which change actually worked once the domain finally resolves. Next time, I need to make one change and leave it alone for at least half an hour.

다크 모드를 만들었는데 두 분기가 똑같다A Dark Mode Where Both Branches Do the Same Thing

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

I added a button to toggle the background color. All 89 lines of script-body.js use jQuery to select elements one by one and overwrite their colors.

<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');
  }
}

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');   // <- black text on a black background
    ...
  }else{
    Body.bodySetBackGroundColor('white');
    Body.setColor('black');
    Links.setColor('black');
    A.hrefSetColor('yellow');     // <- yellow text in light mode too
    H1.h1HrefSetColor('black');
  }
}

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

Putting the two branches side by side makes the bug obvious. A.hrefSetColor('yellow') and H1.h1HrefSetColor('black') are identical in both branches. In light mode the menu links stay yellow on white, and in dark mode the site title becomes black text on a black background—completely invisible.

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

And I knew it was broken. Clicking the button pops up an alert saying "Dark mode is still unstable." Instead of fixing the bug, I slapped a warning dialog on top of it.

다음에 열면 여기부터Where to Start Next Time

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

Looking at the current state, four problems are clear:

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

• Five copies of the header and menu. They need a single source of truth. Editing five files by hand guarantees one will eventually fall out of sync.
• Experiments saved as filenames. Delete clutter like Test copy 2.c and use Git branches.
• Dark mode sets the same colors in both branches. Replace per-element JS color setters with CSS state styling.
• No commit message convention. Messages like test-1-1 and 0.2.0 (used three times) make it impossible to find anything later.

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

That is where I am leaving it for now. When I reopen this project, those four items come first.