웹 퍼블리셔

마크업 · 스타일

거의 모든 공고의 1순위입니다. 이 영역의 완성도가 곧 실력입니다.

• HTML5필수

  시맨틱 태그로 문서 구조를 의미에 맞게 잡을 수 있어야 합니다. div만으로 화면을 짜는 습관은 이 직무에서 바로 드러납니다.

• CSS3필수

  박스 모델, Flex, Grid, position을 자유롭게 조합해 시안대로 배치할 수 있어야 합니다. 애니메이션과 트랜지션도 자주 요구됩니다.

• 반응형 웹필수

  미디어 쿼리로 모바일·PC를 대응하는 것은 선택이 아니라 기본 요구사항입니다.

• CSS 전처리기 (Sass 등)권장

  변수와 중첩으로 스타일을 정리하는 도구입니다. 실무에서 쓰는 곳이 많아 알아두면 적응이 빠릅니다.

퍼블리셔의 정체성

다른 직무와 구분되는 지점입니다. 면접에서 깊게 묻는 영역이기도 합니다.

• 웹표준필수

  표준을 지킨 마크업이 왜 필요한지(유지보수, 검색, 호환) 설명할 수 있어야 합니다.

• 웹접근성필수

  대체 텍스트, 키보드 접근, 명도 대비, ARIA 속성. 공공기관 사이트 작업이 있는 곳에서는 특히 중요하게 봅니다.

• 크로스브라우징필수

  브라우저별로 다르게 동작하는 문제를 겪고 맞춰본 경험. 실무에서 시간을 가장 많이 쓰는 부분 중 하나입니다.

• 웹 최적화권장

  이미지 용량과 로딩 순서를 신경 쓰는 정도. 공고에서 웹 최적화에 대한 이해를 함께 요구합니다.

스크립트

• JavaScript필수

  탭·슬라이드·모달처럼 자주 쓰는 동작을 직접 구현할 수 있어야 합니다. 프론트엔드로 넘어가는 발판이기도 합니다.

• jQuery권장

  새 프로젝트에서 줄고 있지만 유지보수가 필요한 현장에서는 여전히 등장합니다. 문법만 익혀두면 됩니다.

• Git권장

  협업 흐름의 기본입니다. 커밋과 브랜치 정도는 다룰 줄 알아야 합니다.

전환을 위한 준비

지금 당장 필수는 아니지만, 이 직무의 커리어를 결정하는 영역입니다.

• React 또는 Vue권장

  프레임워크 경험을 우대하는 퍼블리셔 공고가 계속 늘고 있습니다. 프론트엔드 전환의 다리이자 처우를 올리는 가장 확실한 카드입니다.

• Figma · 디자인 툴권장

  요즘 시안은 대부분 Figma로 옵니다. 값을 확인하고 에셋을 내보내는 정도면 충분합니다. 포토샵도 여전히 쓰입니다.

• UI/UX 이해우대

  왜 이렇게 배치했는지 이해하면 디자이너와의 대화가 달라집니다. 우대사항으로 자주 등장합니다.

• SEO 기초우대

  시맨틱 마크업과 직접 연결되는 영역입니다. 마크업의 근거를 설명할 때 유리합니다.

포트폴리오 제출이 사실상 필수인 직무입니다. 이 포트폴리오가 중심입니다. 공개된 디자인 시안이나 마음에 드는 사이트를 골라 처음부터 직접 마크업하고, 모바일·태블릿·PC를 모두 대응합니다. 눈에 보이는 결과물이 있는 직무라 배포된 링크가 없으면 손해가 큽니다.

• ✓접속 가능한 배포 URL (Netlify·Vercel·GitHub Pages 등)
• ✓GitHub 저장소 공개 + README
• ✓모바일·태블릿·PC 화면 각각 대응
• ✓시맨틱 태그로 잡은 문서 구조
• ✓주요 브라우저에서 동작 확인

위 프로젝트에서 파생시키는 것이 가장 효율적입니다. 대체 텍스트, 키보드만으로 이동하기, 명도 대비, 스크린 리더에서 읽히는 순서를 점검하고 개선 전후를 기록합니다. 퍼블리셔의 정체성을 가장 잘 보여주는 자료이고, 공공 프로젝트를 하는 회사에서는 특히 강하게 작용합니다.

• ✓점검한 접근성 항목 목록
• ✓개선 전후 마크업 비교
• ✓키보드 탐색 순서 확인 기록
• ✓명도 대비 측정 결과

퍼블리셔로 지원하면서 동시에 프론트엔드로 가는 길을 열어두는 항목입니다. 앞서 마크업한 페이지를 컴포넌트로 나눠 React로 다시 만들고, 데이터를 받아 목록을 그리는 부분까지 붙입니다. 프레임워크 경험이 우대사항으로 붙은 공고에서 바로 대응됩니다.

• ✓화면을 컴포넌트로 나눈 기준 설명
• ✓상태에 따라 바뀌는 UI 구현
• ✓공개 API 또는 더미 데이터 연동
• ✓배포 URL과 GitHub 저장소