이력서는 문서가 아니라 브라우저가 읽는 정체성이다

좋은 이력서는 얼마나 많은 경력을 담았는지가 아니라, 무엇을 먼저 보게 만드는가로 평가해야 한다. 그런데 대부분의 사람은 이력서를 쓰면서 문장부터 고친다. 더 정확한 질문은 따로 있다. 이 내용을 어떤 구조로 배치해야 읽는 사람이 핵심을 놓치지 않을까?

웹 이력서를 만드는 일은 이 질문을 아주 정직하게 드러낸다. HTML은 이력서의 뼈대를 세우고, CSS 선택자는 그 뼈대 중 무엇을 골라 어떻게 다룰지 결정한다. 겉으로 보면 하나는 문서 작성법이고 다른 하나는 스타일 지정법이다. 그러나 둘을 함께 보면 더 깊은 원리가 보인다. 정보의 가치는 내용 자체뿐 아니라 구조와 선택의 규칙에서 발생한다.

이 원리는 이력서에만 해당하지 않는다. 포트폴리오, 보고서, 발표 자료, 제품 화면, 심지어 자기소개를 구성하는 방식에도 그대로 적용된다. 우리는 무엇을 말할지뿐 아니라, 어떤 질서로 말하고 어떤 요소를 강조하며 어떤 요소를 숨길지를 끊임없이 설계한다.

내용보다 먼저 설계해야 하는 것

처음 웹 이력서를 만들 때 가장 자연스러운 접근은 빈 페이지에 정보를 채워 넣는 것이다. 이름을 적고, 연락처를 적고, 학력과 경력을 이어 붙인다. 이 방식은 종이에 쓰는 이력서와 비슷하기 때문에 익숙하다. 하지만 웹 문서는 단순한 종이가 아니다. 브라우저와 검색 엔진과 보조 기술이 이해할 수 있는 구조를 함께 제공해야 하는 인터페이스다.

그래서 내용이 많아지기 전에 뼈대를 세우는 일이 중요하다. 요약, 경력, 학력, 기술, 연락처처럼 서로 다른 덩어리를 구분하는 것은 장식이 아니다. 각 덩어리의 경계를 명확히 하는 행위다. HTML의 section 같은 의미 있는 구조는 사람에게만 보이는 구분선이 아니라, 문서가 스스로 자신의 논리를 설명하도록 만든다.

예를 들어 다음 두 문서는 눈으로 볼 때 비슷할 수 있다.

<div>경력</div>
<div>제품 기획자, 2022년부터 현재</div>
<div>사용자 조사와 실험 설계 담당</div>

<section>
  <h2>경력</h2>
  <p>제품 기획자, 2022년부터 현재</p>
  <p>사용자 조사와 실험 설계 담당</p>
</section>

두 번째 구조는 제목과 본문과 영역 사이의 관계를 표현한다. 화면의 모양이 같아도 문서의 의미는 다르다. 첫 번째는 글자가 우연히 나란히 놓인 상태에 가깝고, 두 번째는 읽는 순서와 정보의 위계를 가진 문서다.

여기서 중요한 통찰이 나온다. 구조는 장식을 기다리는 빈 골격이 아니라, 해석을 가능하게 하는 약속이다. 누군가의 이력서를 읽는다는 것은 문장을 하나씩 해독하는 일이 아니다. 제목을 통해 지도를 얻고, 섹션을 통해 범위를 파악하고, 반복되는 항목을 통해 패턴을 발견하는 일이다.

이것은 도시의 도로와 비슷하다. 건물이 아무리 훌륭해도 길이 연결되지 않으면 방문자는 목적지에 도달하기 어렵다. 이력서의 정보가 건물이라면 HTML 구조는 도로망이다. 내용이 부족해서 읽히지 않는 경우도 있지만, 더 자주 발생하는 문제는 내용이 서로 연결되지 않아 읽는 사람이 길을 잃는 것이다.

선택자는 무엇을 중요하게 만드는가

구조를 세웠다고 해서 독자가 자동으로 핵심을 발견하는 것은 아니다. 모든 정보가 똑같은 크기와 색과 간격으로 놓이면, 문서는 정직해 보일 수 있지만 읽기 어렵다. 여기에서 CSS 선택자의 역할이 등장한다.

선택자는 특정 요소를 골라 규칙을 적용하는 장치다. 태그를 기준으로 선택할 수도 있고, 클래스나 아이디를 기준으로 선택할 수도 있으며, 요소 사이의 관계를 기준으로 선택할 수도 있다. 이 기술적 기능은 곧 하나의 편집 원리로 확장된다. 선택한다는 것은 중요도를 선언하는 일이다.

예를 들어 모든 h2에 같은 스타일을 적용하면 문서 전체의 주요 영역이 일관된 위계를 얻는다.

h2 {
  font-size: 1.4rem;
  margin-top: 2rem;
}

반면 특정 섹션 안의 제목만 다르게 만들면 더 정교한 의미를 표현할 수 있다.

section.summary h2 {
  color: navy;
}

이 코드는 단순히 색을 바꾸는 명령이 아니다. 요약 섹션의 제목이 다른 영역과 구별되어야 한다는 판단을 기록한다. 선택자는 문서 안에서 어떤 요소가 어떤 맥락에 속하는지 보여 주는 작은 문법이다.

여기서 이력서의 고질적인 문제가 설명된다. 많은 이력서는 모든 내용을 강조한다. 모든 업무는 중요하고, 모든 기술은 숙련되었으며, 모든 프로젝트는 대표작처럼 묘사된다. 그러나 모든 것이 강조되면 실제로 강조되는 것은 없다. 선택자가 없는 문서가 아니라, 선택의 기준이 없는 문서가 되는 셈이다.

독자는 제한된 시간 안에 판단한다. 처음에는 이름과 현재 역할을 보고, 다음에는 요약과 최근 경험을 훑으며, 그 뒤에 자신의 필요와 관련된 세부 내용을 확인한다. 이 읽기 과정은 완전한 독서가 아니라 탐색이다. 따라서 좋은 이력서는 모든 정보를 같은 힘으로 보여 주는 대신, 독자가 가장 먼저 확인해야 할 경로를 설계한다.

좋은 이력서는 더 많은 정보를 보여 주는 문서가 아니라, 올바른 정보에 더 짧은 경로를 제공하는 문서다.

의미의 구조와 시선의 구조는 다르다

HTML과 CSS를 함께 사용할 때 특히 조심해야 할 점이 있다. 의미의 구조와 시선의 구조는 서로 관련되지만 동일하지 않다. HTML은 정보가 무엇인지 설명하고, CSS는 그 정보가 어떻게 보일지 조정한다. 이 둘을 뒤섞으면 보기에는 멋지지만 이해하기 어려운 문서가 만들어진다.

가령 경력 섹션을 화면의 왼쪽에 배치했다고 해서 그것이 문서의 첫 번째 핵심이라는 뜻은 아니다. 큰 글자로 표시했다고 해서 실제로 가장 중요한 정보라는 뜻도 아니다. 반대로 시각적으로 작게 보이는 정보가 문서의 접근성이나 검색 가능성 측면에서는 매우 중요할 수 있다.

이 차이는 이력서에서 치명적이다. 디자인을 위해 제목을 일반적인 div로 만들고, 본문을 이미지로 저장하고, 날짜와 직무의 관계를 공백으로 표현하면 사람의 눈에는 어느 정도 전달될 수 있다. 하지만 화면 낭독기나 검색 시스템이나 나중에 문서를 수정하는 사람에게는 의미가 사라진다.

따라서 문서를 설계할 때는 두 가지 질문을 분리해야 한다.

첫째, 이 정보는 무엇인가? 이것은 구조와 의미의 질문이다. 이름인가, 섹션 제목인가, 경력 항목인가, 세부 설명인가.

둘째, 이 정보는 지금 어떤 역할을 해야 하는가? 이것은 시각적 우선순위와 독자의 행동에 관한 질문이다. 먼저 읽혀야 하는가, 비교되어야 하는가, 필요할 때만 펼쳐져야 하는가.

첫 번째 질문에 HTML로 답하고, 두 번째 질문에 CSS로 답하면 문서는 훨씬 견고해진다. 반대로 두 질문 모두를 색과 크기만으로 해결하려 하면 문서는 특정 화면에서만 작동하는 임시 결과물이 된다.

이 구분은 개인의 사고에도 적용된다. 자신의 경험을 설명할 때도 사실과 해석과 강조를 구별해야 한다. 무엇을 했는지는 사실의 층위이고, 그것이 어떤 문제를 해결했는지는 맥락의 층위이며, 왜 다음 역할에 중요한지는 해석의 층위다. 이 세 가지를 한 문단에 뒤섞으면 경력은 길어지지만 설득력은 약해진다.

이력서를 하나의 선택 시스템으로 보기

이력서를 더 잘 만드는 실용적인 방법은 그것을 정적인 문서가 아니라 선택 시스템으로 보는 것이다. 선택 시스템은 네 단계로 구성된다.

1. 의미 있는 단위로 나눈다

먼저 정보를 섹션과 항목으로 나눈다. 요약, 경력, 프로젝트, 기술처럼 독자가 서로 다른 질문을 던질 수 있는 단위를 분리한다. 한 섹션 안에서도 회사, 역할, 기간, 성과를 일정한 구조로 반복하면 비교가 쉬워진다.

이 단계에서 중요한 것은 많이 나누는 것이 아니다. 독자가 실제로 구분할 필요가 있는 단위만 나누는 것이다. 프로젝트 설명을 지나치게 잘게 쪼개면 문서는 데이터베이스처럼 보이고, 반대로 모든 내용을 한 단락에 넣으면 탐색이 불가능해진다.

2. 각 단위의 대표 질문을 정한다

요약 섹션의 질문은 “이 사람은 어떤 문제를 해결하는가?”일 수 있다. 경력 섹션의 질문은 “어떤 환경에서 무엇을 증명했는가?”일 수 있다. 기술 섹션의 질문은 “무엇을 사용할 수 있는가?”보다 “어떤 작업에 적용해 보았는가?”에 가까울 수 있다.

섹션마다 대표 질문이 있으면 정보가 단순한 목록에서 주장으로 바뀐다. 경력이 직함의 연속이 아니라 문제 해결 능력의 증거가 된다.

3. 선택 규칙을 만든다

이제 무엇을 먼저 보여 줄지 정한다. 최근 경험을 위에 둘 것인지, 지원 직무와 직접 관련된 프로젝트를 앞세울 것인지, 수치로 확인할 수 있는 성과를 요약에 포함할 것인지 결정한다.

CSS 선택자의 사고방식은 이 단계에 유용하다. 모든 항목에 같은 규칙을 적용할 것인지, 특정 맥락의 항목에만 예외를 둘 것인지 판단하는 것이다. 예를 들어 모든 경력 항목의 직무명은 같은 크기로 표시하되, 지원 직무와 직접 관련된 성과에는 별도의 시각적 표식을 줄 수 있다.

다만 예외가 많아질수록 시스템은 약해진다. 모든 항목에 특별한 클래스가 붙는다면 특별함은 사라진다. 선택자는 많을수록 좋은 것이 아니라, 일관된 판단을 반복할 수 있을 때 좋은 것이다.

4. 실제 독자의 경로로 시험한다

완성된 뒤에는 처음부터 끝까지 정독하지 말고, 삼십 초 동안 훑어 본다. 이름, 현재 역할, 핵심 역량, 가장 강한 증거가 바로 들어오는지 확인한다. 그다음 관심 없는 부분을 일부러 건너뛰어도 문서의 전체 의미가 유지되는지 살핀다.

좋은 구조는 독자가 모든 내용을 읽지 않아도 핵심을 잃지 않게 한다. 이것은 내용을 숨기는 기술이 아니라, 정보의 우선순위를 설계하는 기술이다.

재사용 가능한 규칙이 신뢰를 만든다

웹 문서의 구조와 선택자를 함께 배우면 또 하나의 중요한 교훈을 얻는다. 신뢰는 일관성에서 생성된다. 경력 항목마다 날짜의 위치가 다르고, 회사명 표기 방식이 다르고, 성과 서술의 문법이 매번 바뀌면 독자는 내용보다 형식을 해석하는 데 에너지를 쓴다.

일관성은 지루함이 아니다. 독자가 새로운 항목을 만날 때마다 이미 익힌 규칙을 재사용할 수 있게 하는 인지적 절약이다. 첫 번째 경력 항목에서 회사명, 역할, 기간, 성과의 순서를 이해했다면 두 번째 항목에서는 같은 순서를 기대할 수 있다. 이 기대가 읽기 속도를 높인다.

이를 작은 디자인 시스템으로 만들 수 있다. 예를 들면 다음과 같은 규칙이다.

• 모든 주요 섹션은 같은 수준의 제목을 사용한다.
• 모든 경력 항목은 역할, 조직, 기간, 성과의 순서를 따른다.
• 성과는 가능하면 행동과 결과를 함께 쓴다.
• 기술 목록은 숙련도 자랑이 아니라 실제 사용 맥락을 보여 준다.
• 특별히 강조하는 정보는 전체의 일부로 제한한다.

이 규칙은 문서의 외관을 통일하는 것 이상이다. 자신의 경험을 어떤 기준으로 판단하는지 드러낸다. 구조가 안정적이면 독자는 내용을 믿기 쉬워지고, 내용이 아무리 화려해도 구조가 흔들리면 과장처럼 보일 수 있다.

Key Takeaways

• 내용을 쓰기 전에 독자의 질문을 정하라. 요약, 경력, 프로젝트가 각각 어떤 질문에 답하는지 한 문장으로 적어 본다.
• 의미와 모양을 분리하라. 정보가 무엇인지 먼저 구조로 표현한 뒤, 무엇을 강조할지 스타일로 결정한다.
• 모든 것을 강조하지 말라. 가장 중요한 주장과 그것을 증명하는 근거에만 강한 시각적 우선순위를 부여한다.
• 반복 가능한 항목 구조를 만들어라. 역할, 기간, 행동, 결과의 순서를 일정하게 유지하면 독자는 더 빠르게 비교한다.
• 삼십 초 탐색 테스트를 하라. 이름, 현재 역할, 핵심 역량, 가장 강한 증거가 짧은 시간 안에 보이는지 확인한다.

이력서를 만드는 일은 자신을 예쁘게 포장하는 일이 아니다. 그것은 자신의 경험 안에 어떤 관계가 있는지 발견하고, 그 관계를 다른 사람이 따라갈 수 있는 형태로 바꾸는 일이다. HTML은 그 관계의 뼈대를 세우고, CSS 선택자는 독자가 따라갈 시선의 경로를 만든다.

결국 좋은 이력서의 핵심은 더 많은 경력을 갖는 데 있지 않다. 이미 가진 경험을 어떤 구조로 해석하게 만들 것인지에 있다. 당신의 이력서는 당신이 한 일을 기록하는 문서인 동시에, 독자가 당신을 이해하는 순서를 설계하는 문서다.

그러므로 다음 번에 이력서를 고칠 때 문장 하나를 더 추가하기 전에 먼저 물어야 한다. 이 정보는 어디에 놓여야 가장 정확하게 읽히는가? 그리고 더 근본적으로, 나는 독자에게 무엇을 먼저 선택하게 만들고 싶은가?