파일과 폴더

컴퓨터 앞에서 벌어지는 모든 일은 결국 정리 정돈이라는 가장 평범한 문제로 귀결된다. 방을 정리하는 습관이 그 사람의 내면을 보여주듯 웹사이트의 폴더 구조는 자신의 사유 체계를 은밀하고 정확하게 드러낸다. 웹사이트를 만드는 것은 결국 여러 파일을 이름을 잘 붙이고, 잘 묶어 폴더에 담아두는 일과 다르지 않다. 이 단순한 원칙이 얼마나 중요하고 섬세한 작업인지 곧 실감하게 될 것이다.
일단 안심해도 좋다. HTML, CSS, 이미지, 폰트, 자바스크립트 등은 모두 파일이다. 이 파일들이 어떻게 서로를 참조하고, 어떤 폴더 안에 담겨 있는지가 곧 웹사이트의 구조가 된다. 즉, 웹사이트는 하나의 서랍장이고, 그 안에 들어 있는 파일들이 바로 콘텐츠의 고갱이다. 여기서 가장 중요한 index.html 파일은 웹사이트의 첫인상, 즉 홈페이지다. 방문자가 웹사이트 주소를 입력했을 때 가장 먼저 만나는 문서다.
그 안에는 <link>를 통해 CSS 파일이 연결되고, <script>를 통해 자바스크립트 파일을 소환한다. 이미지 하나를 불러올 때도 images/cherry.jpg처럼 정확한 경로를 지시해야 한다. 이때 images 폴더가 없다면 컴퓨터는 파일을 찾지 못하고 길을 잃는다. 컴퓨터는 폴더 구조에 아주 충실한 까닭에 실수는 대부분 여기서 발생한다. 폴더를 정리하는 감각은 곧 구조를 만드는 감각이다. 그렇다면 폴더 구조는 어떻게 만들어야 좋을까? 아쉽게도 속절없이 의지할 만한 정답은 없지만 대개 다음과 같다.

my-new-order // 폴더
├─ index.html // HTML 파일 (홈페이지)
├─ about.html // HTML 파일
├─ cherry.jpg // 이미지 파일
├─ style.css // CSS 파일
└─ script.js // 자바스크립트 파일

물론 이는 가장 기본적인 구조다. 언젠가 우리의 집이 한 칸짜리 방에서 여러 방을 가진 저택으로 확장될 때 image 폴더뿐 아니라 css 폴더와 js 폴더를 따로 만들어 CSS 파일과 자바스크립트 파일을 각각 담아두는, 조금 더 야심 찬 방식을 고려할 수 있다.
이때 파일명과 폴더명을 정할 때 지켜야 할 약속, 즉 규칙이 있다. 아주 단순하지만, 가장 자주 무너지는 부분이기도 하다. 다음은 웹사이트를 만들 때 반드시 지켜야 할 파일명과 폴더명을 둘러싼 규칙이다.
공백은 절대 사용하지 말 것. new order.html 대신 new-order.html처럼 공백 대신 하이픈(-) 또는 언더스코어(_)를 쓰자. 많은 웹 서버가 파일명의 공백을 이해하지 못해 당황하거나 흰 셔츠에 묻은 케첩 자국처럼 다소 흉한 %20 같은 문자로 바꿔버리는 까닭이다.
알파벳 소문자를 기본으로. 일부 서버는 대소문자를 구분한다. 즉, 경우에 따라 cherry.jpg와 Cherry.jpg, Cherry.Jpg는 전혀 다른 파일이다. 이는 도서관에서 『New Order』와 『New order』와 『new order』를 전혀 다른 책으로 취급하는 깐깐한 사서를 상대하는 일과 다르지 않다. 이런 피곤한 논쟁은 처음부터 피하는 것이 상책이다.
특수문자 사용 금지. 슬래시(/), 물음표(?), 느낌표(!), 쉼표(,) 같은 특수문자는 오류를 일으킬 수 있다.
짧고 명확하게. 지나치게 긴 파일명은 경로가 복잡해지고, 오류를 추적하는 것도 어려워진다. 예컨대 2023-my-website-version-37-final-really-final-index.html 같은 파일명은 규칙 없는 규칙에 잠식된 자기 파괴 행위에 가깝다. 물론 우리의 다운로드 폴더에는 이런 이름의 파일이 적어도 서른일곱 개쯤은 있다.
일관성 유지. 어떤 규칙을 따르든 그 규칙을 끝까지 유지하는 게 중요하다.
파일명과 폴더명은 그저 컴퓨터에 ‘저장된 이름’이 아닌 웹사이트 내부 언어의 중요한 일부다. 파일명과 폴더명 하나를 정하는 일은 문장의 첫 단어를 고르는 일과 같다. 문장이 흐트러지면 읽히지 않듯 파일명과 폴더명이 규칙 없이 어수선하면 웹사이트 또한 흔들린다.
이때 잊지 말아야 할 점은 폴더명이 그 자체로 일종의 ‘주소’가 된다는 점이다. 웹에서는 폴더 구조가 곧 주소 체계가 된다. 예컨대 cherry.html 파일을 favorites 폴더에 넣는 순간, 주소는 yourwebsite.com/cherry.html에서 yourwebsite.com/favorites/cherry.html로 탈바꿈한다. 폴더 하나를 만드는 일이 구조 하나를 만드는 일이고, 경로 하나를 정리하는 일이 독자의 흐름을 설계하는 일이 된다.
파일과 폴더는 웹사이트의 설계도다. 겉으로 드러나지 않지만, 정확하고 정교하지 않으면 어느 것도 제대로 작동하지 않는다. 파일과 폴더를 다루는 감각은 기술 이전에 사소하고 자연스러운 습관이다. 작은 것을 분류하고, 이름을 붙이고, 제자리에 넣는 일. 그렇게 쌓인 파일과 폴더가 결국 하나의 세계를 만든다. 그리고 이 세계는 아주 단순한 index.html 파일에서 시작한다. 이 파일이 문을 열고, 그 옆의 파일과 폴더에서 콘텐츠가 생동한다. 파일과 폴더는 웹사이트의 첫 번째 질서다.