Claude Code로 알바 공고 시급 비교 페이지 만들기
알바 공고 캡처 4장으로 바로 고르기
알바를 구할 때 제일 귀찮은 순간은 공고를 많이 본 뒤에도 결정을 못 내릴 때입니다. 시급은 높은데 집이 멀고, 집이 가까우면 시간대가 안 맞고, 주말만 가능한 공고는 또 조건이 다르죠. 오늘 만드는 화면은 그 비교를 한 번에 끝내려고 쓰는 작은 페이지입니다. 알바 공고 캡처 4장만 넣으면 시급, 거리, 시간대, 한 줄 판단이 카드로 정리돼서 어떤 공고에 먼저 지원할지 바로 보이게 만드는 방식이에요.
이 작업은 개발 지식이 많지 않아도 시작하기 편합니다. Claude Code에 캡처를 붙여 넣고, /plan으로 순서를 좁히고, CLAUDE.md에 비교 기준을 적어두면 첫 버전이 금방 나옵니다. 오늘 목표는 멋진 서비스 출시가 아니라 공고 여러 개를 동시에 놓고 판단할 수 있는 화면 하나를 손에 넣는 데 있습니다. 그 바닥이 생기면 다음부터는 조건을 조금씩 바꾸는 쪽이 훨씬 쉽습니다.
준비는 단순할수록 좋다
준비물은 Claude Code와 공고 캡처입니다. 캡처는 3장이어도 돌아가고 4장이면 비교하기 더 편합니다. 채용 앱 링크를 복사해서 정리하는 데 시간을 쓰기보다, 시급과 위치, 근무 시간이 보이는 화면을 바로 모아두는 편이 빠릅니다. 한 장에 공고 하나가 또렷하게 보이게 잡아두면 읽기 흐름이 덜 꼬이고, 나중에 수정 칸을 붙일 때도 헷갈림이 줄어듭니다.
붙여 넣으면서 바로 만든다
처음부터 여러 파일로 나누지 않는 이유가 분명합니다. index.html 하나로 시작하면 5분 안에 화면이 뜨고, 뭐가 부족한지 눈으로 바로 확인할 수 있습니다. Alt+V로 캡처를 붙이는 흐름까지 잡아두면 입력도 단순합니다. 시급과 위치와 시간대가 같은 화면에 모여 있기만 해도 선택 속도가 달라집니다. 처음 결과가 투박해 보여도 괜찮아요. 지금 단계에서는 예쁜 디자인보다 공고를 나란히 보는 감각을 먼저 확보하는 편이 낫습니다.
여기서부터 화면이 조금 사람 답게 바뀝니다. 같은 시급이면 거리 우선, 밤 11시 이후 근무는 경고, 말투는 짧고 담백하게. 이 세 줄만 있어도 결과 카드가 숫자 나열에서 생활 기준이 들어간 비교로 바뀝니다. 실제로 알바를 고를 때는 돈만 보지 않잖아요. 집에 늦게 돌아오는 문제나 초보가 버틸 만한 시간대인지 같은 요소가 같이 보여야 선택이 쉬워집니다. CLAUDE.md는 그런 취향을 매번 다시 설명하지 않게 해주는 메모장 역할을 합니다.
이미지에서 글자를 읽을 때는 작은 문구가 빠질 수 있습니다. 시급은 잡았는데 위치가 흐리거나, 시간대는 읽었는데 우대 조건이 빠지는 식이죠. 그래서 직접 고칠 수 있는 입력칸이 들어가야 실사용에 가깝습니다. 한 줄 판단도 이 단계에서 힘을 발합니다. 숫자만 가득한 표보다 퇴근 후 하기 편함, 주말 몰빵형 같은 짧은 문장이 붙으면 누가 봐도 차이가 바로 보입니다. 친구에게 링크 네 개를 다시 설명할 필요 없이 카드만 보여줘도 되는 상태가 되는 거예요.
이 타이밍에 바로 저장 버튼이나 공유 기능을 붙이면 화면이 금방 무거워집니다. /plan으로 먼저 좁혀 보면 다음 한 걸음이 훨씬 또렷해집니다. 어떤 사람은 최소 시급 필터가 더 급하고, 어떤 사람은 밤 근무 경고를 맨 위로 올리는 편이 더 맞을 수 있습니다. 이렇게 우선순위를 먼저 잡아두면 기능이 늘어나도 방향이 흐트러지지 않습니다. 특히 Vibe Coding으로 처음 무언가 만들 때는 기능 수보다 판단 순서가 더 중요합니다.
마지막 검수는 범위를 좁게 잡는 편이 좋습니다. 버튼 이름이 영어로 남아 있으면 한국어로 바꾸고, 빈 화면에는 공고 캡처를 올리면 바로 비교된다는 안내만 남기면 됩니다. 모바일 폭에서 카드가 잘리는지, 입력칸이 손가락으로 누르기 편한지, 긴 문장이 두 줄 세 줄로 늘어지는지 이 정도만 보면 충분합니다. 새 기능을 얹지 않아도 이 단계까지 지나면 바로 써볼 수 있는 수준의 화면이 나옵니다.
막히는 지점은 이렇게 정리한다
캡처를 넣었는데 시급이 이상하게 읽히면 한 장 안에 정보가 너무 많이 들어간 경우가 많습니다. 공고 하나만 또렷하게 보이게 다시 캡처하고, Step 3에서 넣은 수정 칸으로 숫자만 바로잡으면 됩니다. 처음부터 완벽한 OCR을 기대하기보다 사람이 마지막 한 줄만 손보는 흐름이 더 편합니다.
공고 순서가 마음에 안 들면 비교 기준이 내 생활 패턴과 안 맞는 경우가 많습니다. CLAUDE.md에 집에서 30분 넘으면 감점 같은 문장을 한 줄 더 넣어보세요. 같은 시급이어도 돌아오는 시간이 긴 공고를 뒤로 밀 수 있고, 주말만 가능한 사람이라면 평일 저녁 근무보다 토요일 몰아서 일하는 공고를 더 높게 둘 수도 있습니다.
모바일에서 카드 설명이 길게 늘어지면 390 폭 기준으로 다시 정렬해달라고 짧게 요청하면 됩니다. 긴 설명은 한 줄 메모로 줄이고, 위치와 시간대는 줄바꿈 규칙을 따로 두면 읽기가 훨씬 편해집니다. 이 정도 손질만 해도 알바 선택 화면이 확실히 단정해집니다.
다음에 붙일 것도 하나씩
여기까지 만들고 나면 다음 선택지도 자연스럽게 보입니다. 텔레그램 알림을 붙여서 새 공고가 올라왔을 때 조건 맞는 것만 받게 하거나, 원하는 시간대와 최소 시급을 저장해서 다시 캡처를 넣을 때 바로 비교하게 만들 수 있습니다. 다만 오늘은 거기까지 욕심낼 필요가 없습니다. 공고 4장을 넣고 어떤 알바에 먼저 지원할지 빠르게 고르는 첫 버전, 그 한 화면이면 다음 작업 속도가 달라집니다.
이런 글도 있어요
관련 검색어
- 🔍 Claude Code 사용법
- 🔍 Claude Code 비교
- 🔍 알바 공고 비교
- 🔍 시급 비교
- 🔍 이미지 입력 사용법
- 🔍 이미지 입력 비교
