퍼블리싱 프리랜서를 모집합니다

• 디자인 시안을 분석해 시맨틱한 HTML 구조로 마크업합니다.
• CSS로 레이아웃, 색상, 폰트를 시안과 동일하게 구현합니다.
• 여러 화면 크기(모바일, 태블릿, PC)에서 반응형으로 동작하도록 작업합니다.
• 버튼, 탭, 슬라이더 등 간단한 인터랙션을 자바스크립트로 구현합니다.
• 여러 브라우저(크롬, 사파리, 엣지)에서 호환성을 점검합니다.
• 이미지 최적화와 접근성(대체 텍스트 등) 기본 사항을 적용합니다.
• 완성된 마크업을 개발팀이 바로 연동할 수 있도록 정리해 전달합니다.

자주 쓰는 도구와 기술

• HTML5/CSS3
• JavaScript/jQuery
• SCSS/SASS
• Figma(디자인 시안 확인)
• Git(버전 관리)
• 크롬 개발자 도구

작업 흐름

1. 1

   디자인 시안 파일과 페이지 수, 반응형 범위를 확인합니다.

2. 2

   마크업 구조와 작업 순서를 계획합니다.

3. 3

   페이지별로 HTML·CSS 코드를 작성합니다.

4. 4

   여러 화면과 브라우저에서 시안과 비교 검수합니다.

5. 5

   완성된 코드를 정리해 전달하고 연동을 지원합니다.

• 페이지 개수와 시안의 복잡도(레이아웃, 애니메이션)에 따라 구분합니다.
• 반응형 지원 범위(모바일만, 전체 대응 등)로 나눕니다.
• 인터랙션(슬라이더, 탭 등) 개수에 따라 달라집니다.
• 브라우저 호환성 검수 범위로 구분합니다.
• 수정 요청 횟수(예: 픽셀 오차 수정 2회 포함)를 기준으로 나눕니다.
• 개발팀 연동 지원 포함 여부로 구분합니다.

패키지 구성 예시

• 완성한 마크업 결과물을 시안과 나란히 비교한 이미지로 포트폴리오에 제시합니다.
• 반응형 처리 사례(모바일-PC 화면 전환)를 별도로 보여줍니다.
• 첫 답장에서 시안 파일 형식과 지원 화면 범위를 먼저 확인합니다.
• 코드 스타일(시맨틱 마크업, 클래스 명명 규칙)을 예시로 보여줍니다.
• 완성 기한과 픽셀 오차 수정 범위를 소개글에 명확히 적어둡니다.
• 여러 브라우저 호환성 검수까지 포함한다는 점을 강조합니다.
• 개발팀과의 연동 경험이 있다면 별도로 안내합니다.

시안과 실제 구현 화면의 픽셀 오차

작업 전 오차 허용 범위를 합의하고 완성 후 시안과 비교 검수합니다.

특정 브라우저에서만 깨지는 호환성 문제

완성 후 여러 브라우저에서 테스트를 거쳐 전달합니다.

폰트·이미지 소스 누락으로 작업 지연

작업 착수 전 필요한 리소스 파일을 모두 확보합니다.

개발팀 코드 구조와 맞지 않아 재작업 발생

연동 전 개발팀이 원하는 코드 구조나 네이밍 규칙을 미리 확인합니다.

수정 범위가 끝없이 늘어남

최초 견적에 수정 횟수를 명시하고 초과 시 추가 협의를 안내합니다.

• 애널리틱스
• 홈페이지 수정·유지보수
• 검색최적화·SEO
• 쇼핑몰 수정·유지보수