코드나 AI로 채용 페이지를 꾸미는 방법

채용 페이지는 지원자가 회사를 처음으로 제대로 접하는 곳인 경우가 많아요. 글꼴, 색상, 말투까지 회사 웹사이트와 같다면, 채용 도구에 딸린 페이지가 아니라 브랜드의 일부처럼 느껴져요.

Emploist를 쓰는 모든 회사에는 로고와 색상이 적용된 첫날부터 바로 쓸 수 있는 채용 페이지가 제공돼요. 그 이상을 원한다면 코드를 편집해 채용 페이지의 모습을 전부 바꿀 수 있어요. 어렵게 들릴 수 있지만 개발자가 아니어도 괜찮아요. 이 가이드에서는 두 가지 방법을 소개해요.

Emploist에서 코드 편집하기. 새 헤드라인이나 글꼴처럼 작은 변경에 적합해요. 입력하는 대로 실시간 미리보기에서 변경 사항을 확인할 수 있어요.
AI 어시스턴트에게 맡기기. 새 섹션처럼 큰 변경에 적합해요. 코드를 다운로드하고, 원하는 내용을 평소 말하듯 설명한 다음, 어시스턴트가 보내 준 파일을 업로드하면 돼요.

샘플 회사인 Northwind Labs로 두 방법을 모두 보여 드릴게요. 시작하기 전의 채용 페이지는 이렇게 생겼어요.

기본 디자인이 적용된 Northwind Labs의 채용 페이지. 로고가 있는 헤더, 짧은 회사 소개와 함께 큼직한 “Join Northwind Labs” 헤드라인, 그리고 부서와 근무지 필터가 있는 채용 중인 포지션 목록이 보여요. — Emploist의 기본 디자인이 적용된 Northwind Labs의 채용 페이지.

바꿀 수 있는 것

채용 페이지는 여섯 개의 파일로 이루어져 있어요. 모두 열어서 편집할 수 있는 작은 텍스트 파일이에요.

파일	담당하는 부분
`layout.liquid`	모든 페이지를 감싸는 틀: 헤더, 푸터, 그리고 글꼴처럼 모든 페이지에서 불러오는 요소
`jobs.liquid`	회사 소개와 채용 중인 포지션 목록이 있는 메인 페이지
`job.liquid`	개별 채용 공고 페이지
`apply.liquid`	지원서 양식
`applied.liquid`	지원서를 제출한 지원자에게 보이는 지원 완료 페이지
`styles.css`	색상, 글꼴, 크기, 간격 등 전체적인 모양

파일에는 간단한 언어 세 가지가 쓰여요. HTML은 제목이나 버튼처럼 페이지에 무엇이 있는지 정해요. CSS는 어떻게 보이는지 정해요. Liquid는 {{ company.name }} 같은 변수를 더하는데, 지원자가 페이지를 열면 Emploist가 이 자리에 회사명, 채용 공고, 그 밖의 정보를 채워 넣어요.

이것저것 시도해 봐도 채용 페이지가 망가질 걱정은 없어요.

저장을 클릭하기 전까지는 지원자에게 아무것도 바뀌지 않아요.
Emploist는 저장하기 전에 코드를 검사하고, 문제가 있으면 무엇을 고쳐야 하는지 알려 줘요.
언제든 기본 디자인으로 되돌릴 수 있어요.

시작하려면 관리자로 로그인한 다음 사이드바에서 채용 페이지를 여세요. 디자인 탭에서 페이지의 색상과 코드를 관리해요. 브랜드 색상만 바꾸면 된다면 대표 색상에서 색을 고르기만 하면 끝이에요. 코드는 필요 없어요.

Emploist의 채용 페이지(“Careers page”) 설정 중 “Design” 탭. “Primary color” 색상 선택기와 “Edit code”, “Download ZIP”, “Upload ZIP” 버튼이 있는 “Code” 섹션이 보여요. — 채용 페이지 → 디자인. 이 가이드에서 쓰는 기능은 모두 코드 섹션에 있어요.

방법 1: Emploist에서 코드 편집하기

편집기 열기

코드 편집을 클릭하세요. 왼쪽에는 페이지 코드가 있고, 파일마다 탭과 그 파일의 용도를 알려 주는 짧은 설명이 있어요. 오른쪽에는 샘플 채용 공고로 채워진 채용 페이지의 실시간 미리보기가 있어요.

Emploist의 코드 편집기. 왼쪽에는 파일 탭과 layout.liquid의 코드가, 오른쪽에는 채용 페이지의 실시간 미리보기가 있어요. — 코드 편집기. 오른쪽 미리보기는 입력하는 대로 업데이트돼요.

미리보기 위의 페이지 이동에서는 지원자가 볼 수 있는 모든 페이지를 오갈 수 있어요. 채용 공고 목록, 채용 공고, 지원서 양식, 지원 완료 페이지, 마감된 채용 공고, 그리고 ‘페이지를 찾을 수 없음’ 페이지예요. 파일 탭을 클릭해도 그 파일이 담당하는 페이지가 표시돼요.

헤드라인 바꾸기

jobs.liquid 탭을 클릭하세요. 3번째 줄에 페이지 맨 위의 큰 헤드라인이 있어요.

<h1 class="hero-title">Join {{ company.name }}</h1>

“Join”을 “Build what’s next at”으로 바꿔 보세요. {{ company.name }}은 그대로 두세요. Emploist가 이 자리에 회사명을 넣어 줘요. 입력을 멈추고 잠시 기다리면 미리보기에 새 헤드라인이 표시돼요.

편집기의 jobs.liquid 파일. 헤드라인이 “Build what's next at {{ company.name }}”으로 바뀌었고, 미리보기에 “Build what's next at Northwind Labs”가 표시돼요. — 태그 사이의 텍스트를 편집하면 미리보기에 바로 반영돼요.

원하는 글꼴 사용하기

글꼴을 바꾸려면 두 군데만 간단히 수정하면 돼요. 여기서는 Google Fonts의 무료 글꼴인 Fraunces를 사용할게요.

글꼴 불러오기. Google Fonts에서 글꼴을 열고 Get font, Get embed code를 차례로 클릭한 다음, fonts.googleapis.com/css2가 들어 있는 <link> 줄을 복사하세요. layout.liquid에서 stylesheet_url이 있는 줄 바로 위에 새 줄을 만들어 붙여넣으세요.
```
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,100..900&display=swap">
```
글꼴 적용하기. styles.css의 위쪽에서 --font:로 시작하는 줄을 찾아, 목록 맨 앞에 글꼴 이름을 따옴표로 감싸 넣고 뒤에 쉼표를 붙이세요.
```
--font: "Fraunces", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
```
목록의 나머지 글꼴은 브라우저가 지정한 글꼴을 불러오지 못할 때 대신 쓰이는 예비 글꼴이에요.

편집기의 styles.css 파일. --font 줄에 Fraunces가 추가되었고, 미리보기의 채용 페이지가 Fraunces 글꼴로 표시돼요. — 이제 페이지 전체에 Fraunces가 쓰여요.

휴대폰에서 확인하기

많은 지원자가 휴대폰으로 채용 페이지를 열어요. 미리보기 위의 휴대폰 아이콘을 클릭하면 페이지를 휴대폰 크기로 볼 수 있어요.

휴대폰 크기로 바뀐 편집기의 미리보기. 새 헤드라인과 글꼴이 적용된 채용 페이지가 좁은 화면에 표시돼요. — 휴대폰 아이콘을 누르면 휴대폰 크기로 미리 볼 수 있어요.

실수는 공개 전에 바로잡기

변경한 내용 때문에 문제가 생기면 Emploist가 바로 알려 줘요. 해당 파일 탭에 빨간 표시가 생기고, 미리보기에는 페이지 대신 무엇이 잘못되었는지가 표시되며, 코드 아래 목록에는 어떤 문제가 몇 번째 줄에 있는지 나와요. 문제를 클릭하면 그 위치로 이동해요. 대부분은 오타나 빠진 닫는 태그 때문이고, 마지막 변경을 실행 취소하면(Mac에서는 Cmd+Z, Windows에서는 Ctrl+Z) 대개 해결돼요.

문제가 생긴 편집기. jobs.liquid 탭에 빨간 표시가 있고 4번째 줄에 밑줄이 그어져 있어요. 미리보기에는 페이지를 표시할 수 없다는 메시지가, 코드 아래 목록에는 저장하기 전에 수정해야 할 문제 1개(jobs.liquid, 4번째 줄, 닫히지 않은 태그)가 표시돼요. — 실수로 {% endif %}를 지우면 {% if %}가 닫히지 않은 채로 남는데, Emploist가 정확한 줄을 짚어 줘요.

문제가 남아 있는 동안에는 저장할 수 없으므로, 지원자가 망가진 페이지를 볼 일은 없어요.

사용할 수 있는 항목 찾아보기

편집기 위쪽의 참조를 클릭하면 채용 공고의 근무지나 회사 소개처럼 사용할 수 있는 모든 변수와, 각 변수가 무엇을 표시하는지 볼 수 있어요.

편집기 위에 열린 “Reference” 패널. company.name, company.description 같은 변수와 각 변수가 표시하는 내용이 나열되어 있어요. — 참조에는 템플릿에 표시할 수 있는 모든 항목이 나와 있어요.

변경 사항 저장하기

미리보기가 마음에 들면 저장을 클릭하세요. 지원자에게 보이는 채용 페이지가 바로 업데이트돼요.

마음이 바뀌었나요? 더보기 메뉴(버리기 옆의 점 세 개)에서 기본 코드로 초기화를 선택하면 Emploist의 기본 디자인으로 돌아가요. 다른 변경과 마찬가지로, 저장하기 전까지는 채용 페이지에 아무 변화도 없어요.

편집기의 “More actions” 메뉴. “Download ZIP”, “Upload ZIP”, “Reset to default code” 항목이 있어요. — 더보기: 코드를 ZIP 파일로 다운로드 또는 업로드하거나, 처음부터 다시 시작할 수 있어요.

방법 2: AI 어시스턴트에게 맡기기

새 섹션이나 다른 레이아웃처럼 큰 변경은 원하는 내용을 설명하고 AI 어시스턴트에게 코드를 맡기는 편이 더 쉬울 때가 많아요. 여기서는 Claude를 사용하지만, 파일을 읽고 다시 보내 줄 수 있는 어시스턴트라면 거의 같은 방식으로 쓸 수 있어요.

코드 다운로드하기

디자인 탭에서 ZIP 다운로드를 클릭하세요. 다음 내용이 담긴 careers-page.zip 파일을 받게 돼요.

여섯 개의 파일: 저장한 변경 사항이 모두 반영되어 있어요.
가이드 README.md: 채용 페이지의 규칙과 사용할 수 있는 모든 변수를 설명해요. 이 파일 덕분에 AI 어시스턴트가 한 번에 코드를 제대로 작성할 수 있어요.
미리보기 키트(preview.mjs, company.json): 내 컴퓨터에서 페이지를 미리 볼 때 써요. 꼭 필요하지는 않으며, 마지막 부분에서 다룰게요.

압축을 풀 필요는 없어요. Claude는 ZIP 파일을 그대로 읽을 수 있어요.

변경 사항 요청하기

claude.ai를 열고 새 채팅을 시작한 다음, + 버튼으로 careers-page.zip을 첨부하세요. 그리고 디자이너에게 말하듯 원하는 내용을 평소 쓰는 말로 설명하세요. 저희는 이렇게 요청했어요.

Emploist에서 쓰는 저희 채용 페이지 코드예요. 채용 공고 목록 페이지를 더 따뜻하고 반겨 주는 느낌으로 바꿔 주세요. 소개 부분을 더 크게 만들어 채용 중인 포지션으로 이동하는 버튼을 넣고, 몇 가지 복리후생(원격 근무 가능, 교육비 지원, 30일 휴가, 팀 오프사이트)을 소개하는 “Why join us” 섹션도 추가해 주세요. README.md를 따라 작업하고, 업로드할 수 있는 ZIP 파일로 보내 주세요.

claude.ai의 새 채팅. careers-page.zip이 첨부되어 있고, 소개를 더 크게 만들고 “Why join us” 섹션을 넣어 채용 공고 목록 페이지를 더 따뜻하게 바꿔 달라는 요청이 입력되어 있어요. — ZIP 파일을 첨부하고 원하는 내용을 설명하세요.

README.md를 따르고 ZIP 파일로 보내 달라고 요청하면 여러 번 주고받는 수고를 덜 수 있어요.

업데이트된 코드 받기

Claude는 4분 정도 걸렸어요. 가이드와 코드를 읽고 변경한 다음, 스스로 결과를 점검했어요. 미리보기 키트로 데스크톱과 휴대폰 크기에서 페이지를 미리 보고, Emploist가 저장 전에 하는 것과 같은 검사도 실행했어요. 그런 다음 바꾼 내용을 요약해 새 careers-page.zip을 보내 줬어요.

더 크고 따뜻해진 소개: 새 헤드라인과 환영 문구, 그리고 아래 목록으로 바로 이동하는 See open roles(채용 중인 포지션 보기) 버튼.
“Why join us” 섹션: 원격 근무 가능, 교육비 지원, 30일 휴가, 팀 오프사이트를 소개하는 카드 네 개.
채용 중인 포지션 목록 다듬기: 목록 위의 짧은 소개 문구 등.

claude.ai에서 Claude가 보낸 답변. careers-page.zip을 업로드할 준비가 되었다는 내용, jobs.liquid와 styles.css에서 바뀐 점 목록, 새 헤드라인은 고정된 텍스트라는 안내, 그리고 “Download” 버튼이 있는 ZIP 파일이 보여요. — Claude가 바꾼 내용을 설명하고, 다운로드할 ZIP 파일을 보내 줘요.

업로드하기 전에 요약을 꼭 읽어 보세요. 이번에는 저희가 바꾼 헤드라인을 Claude가 자신이 쓴 “Come build what’s next with us”로 교체했다며, 다시 바꾸려면 어느 줄을 수정하면 되는지도 알려 줬어요. 또 교육비 지원 금액 같은 세부 내용을 지어내지 않고 복리후생을 일반적인 표현으로 남겨 둬서, 저희가 직접 내용을 채울 수 있었어요.

결과가 마음에 들지 않으면 대화를 이어 가세요. “버튼을 초록색으로 바꿔 주세요”, “건강보험 관련 복리후생을 추가해 주세요”, “소개를 더 짧게 줄여 주세요”처럼요. 다 끝나면 업데이트된 ZIP 파일을 요청하세요.

Emploist에 업로드하기

다시 디자인 탭으로 돌아가 ZIP 업로드를 클릭하고, Claude가 보낸 ZIP 파일을 선택하세요. Emploist가 새 코드를 불러온 상태로 편집기를 열어요. 아직 저장되지는 않았으므로, 지원자에게 보이는 페이지가 바뀌기 전에 먼저 확인할 수 있어요.

ZIP 파일을 업로드한 직후의 편집기. 상태에 “Unsaved changes”가 표시되고, careers-page.zip에서 파일을 불러왔으니 미리보기를 확인한 다음 저장하라는 메시지가 있어요. 미리보기에는 “See open roles” 버튼이 있는 새 소개가 보여요. — 업로드한 코드가 편집기에 열려, 바로 확인할 수 있어요.

페이지 이동과 휴대폰 아이콘으로 모든 페이지를 확인하세요. 문제가 있으면 편집기에서 고치거나 Claude에게 다시 요청하세요. 모두 괜찮아 보이면 저장을 클릭하세요.

결과

두 가지 변경을 모두 마친 Northwind Labs의 채용 페이지예요. 편집기에서 적용한 Fraunces 글꼴과 Claude가 새로 만든 디자인이 반영되어 있어요. 이 가이드 맨 위의 기본 디자인과 비교해 보세요.

Fraunces 글꼴로 새롭게 디자인한 Northwind Labs의 채용 페이지. “Careers at Northwind Labs” 라벨, “Come build what's next with us” 헤드라인, 회사 소개, 환영 문구, 채용 중인 포지션 수가 함께 표시된 “See open roles” 버튼, 그리고 “Remote-friendly”, “Learning budget”, “30 days off”, “Team offsites” 카드 네 개가 있는 “Why join us” 섹션이 보여요. — 완성된 채용 페이지. 채용 중인 포지션 목록은 더 아래에 있어요.

휴대폰에서는 이렇게 보여요.

휴대폰에서 본 새 디자인의 채용 페이지. 헤드라인, 회사 소개, 화면 너비에 꽉 차는 “See open roles” 버튼이 있고, 그 아래로 “Why join us” 섹션이 시작돼요. — 휴대폰에서 본 같은 페이지.

내 컴퓨터에서 미리 보기(선택 사항)

업로드하기 전에 내 컴퓨터에서 변경 사항을 시험해 보고 싶다면 ZIP 파일의 미리보기 키트를 사용하세요. Emploist의 미리보기처럼 샘플 채용 공고로 채용 페이지를 보여 줘요. Node.js 22 이상이 필요해요.

careers-page.zip의 압축을 푸세요.
압축을 푼 폴더에서 터미널을 열고 node preview.mjs를 실행하세요.
브라우저에서 http://localhost:4321을 열고, 변경할 때마다 새로고침하세요.

Emploist가 저장 전에 하는 것과 같은 방식으로 코드에 문제가 없는지 확인하려면 node preview.mjs check를 실행하세요. Claude Code처럼 내 컴퓨터의 파일로 작업하는 AI 어시스턴트를 쓴다면, 이 명령을 대신 실행해 달라고 요청할 수도 있어요.

알아 두면 좋은 점

관리자만 코드를 편집할 수 있어요. 다른 팀원은 디자인 탭을 볼 수는 있지만 변경할 수는 없어요.
채용 페이지에서는 JavaScript가 실행되지 않아요. 덕분에 페이지와 지원자를 안전하게 지킬 수 있어요. 이 가이드의 모든 내용은 JavaScript 없이 작동해요.
이미지, 글꼴, 스타일시트는 다른 웹사이트에서도 불러올 수 있어요. 단, 주소가 https://로 시작해야 해요. Google Fonts도 이 방식으로 작동해요.
지원서 양식은 디자인을 어떻게 바꾸든 계속 작동해요. 그래서 지원서도 계속 각 채용 공고의 받은편지함으로 들어와요.

내 채용 페이지를 직접 보고 싶나요? 무료 체험을 시작하세요. 회사를 설정하는 순간 채용 페이지가 준비돼요. 그다음 원하는 대로 꾸며 보세요.