웹·코드 템플릿 프리랜서를 모집합니다

• 요청한 화면 구조에 맞춘 컴포넌트 단위 설계
• HTML·CSS(또는 Tailwind 등)로 반응형 레이아웃 구현
• 자바스크립트로 인터랙션(메뉴, 슬라이더, 폼 검증 등) 구현
• 재사용 가능한 컴포넌트와 변수(색상, 폰트) 체계 정리
• 다양한 화면 크기(모바일·태블릿·데스크톱) 테스트
• 코드 주석과 폴더 구조 정리로 가독성 확보
• 설치·실행 방법을 담은 안내 문서(README) 작성
• 완성 코드의 브라우저 호환성·오류 최종 점검

자주 쓰는 도구와 기술

• HTML/CSS/JavaScript
• React 또는 Vue
• Tailwind CSS
• Git/GitHub
• Figma(디자인 참고 시)
• Node.js

작업 흐름

1. 1

   의뢰인이 원하는 화면 구성과 기술 스택을 확인합니다.

2. 2

   핵심 화면 1개를 먼저 구현해 구조와 스타일 방향을 공유합니다.

3. 3

   확정된 방향으로 나머지 화면을 구현합니다.

4. 4

   다양한 화면 크기에서 테스트하고 요청 사항을 반영합니다.

5. 5

   소스코드와 설치 안내 문서를 함께 전달합니다.

• 화면(페이지) 개수와 컴포넌트 복잡도에 따라 구간을 나눕니다.
• 정적 화면 제작과 실제 기능(폼 제출, 로그인 등) 구현은 작업량이 다르므로 나눠 책정합니다.
• 반응형 대응 범위(모바일 포함 여부)를 구분합니다.
• 수정 요청 횟수를 정해두고 초과분은 추가로 안내합니다.
• 특정 프레임워크(React, Vue 등) 사용 여부에 따라 구분합니다.
• 재판매용 템플릿과 1회성 맞춤 개발은 성격이 다르므로 별도로 안내합니다.

패키지 구성 예시

• 실제 동작하는 데모 링크나 화면 녹화본을 포트폴리오로 함께 제공합니다.
• 상품 제목에 사용 기술(React, Tailwind 등)과 용도(랜딩페이지 등)를 명확히 씁니다.
• 코드 구조와 폴더 구성을 상세페이지에 스크린샷으로 보여줍니다.
• 설치부터 실행까지 걸리는 과정을 README 예시로 미리 안내합니다.
• 첫 문의에는 어떤 기술 스택을 쓰고 계신지 되물어 맞춤 답변을 합니다.
• 브라우저 호환 범위(최신 브라우저 기준 등)를 명시해 오해를 줄입니다.
• 수정 가능 범위와 수정 횟수를 상품 설명에 미리 밝혀 분쟁을 줄입니다.

브라우저별로 화면이 다르게 보임

주요 브라우저(크롬, 사파리, 엣지)에서 직접 테스트한 뒤 납품합니다.

다른 프로젝트에 붙였을 때 충돌 발생

클래스명과 변수명을 고유하게 짜고 의존성 목록을 명확히 안내합니다.

구매자가 코드를 실행하지 못함

설치 순서를 단계별로 정리한 안내 문서를 함께 제공합니다.

수정 범위에 대한 이견

최초 견적 시 수정 가능 횟수와 범위를 문서로 남겨 공유합니다.

완성 후 기능이 계속 추가됨

작업 시작 전 화면과 기능 목록을 확정해 서로 확인받은 뒤 진행합니다.

• 디자인 소스(PSD·AI·피그마)
• 엑셀 템플릿
• 한글(HWP) 템플릿
• 노션 템플릿
• PPT 템플릿
• 이력서·문서 양식
• 워드 템플릿