견적 문의
  1. HOME
  2. 서비스
  3. 홈페이지 퍼블리싱

SERVICE 02 · PUBLISHING

홈페이지 퍼블리싱

디자인 시안을 웹표준 반응형 코드로, 1px까지 그대로

QUEST INFO

홈페이지 퍼블리싱만
따로 맡기셔도 됩니다

디자인 시안을 받아 웹표준 반응형 코드로 옮깁니다.
시안을 만든 사람이 의도한 간격과 움직임까지 그대로 살립니다.

QUEST 02홈페이지 퍼블리싱난이도 ★★

!이런 분께 추천해요

  • 디자인 시안은 있는데 퍼블리싱할 사람이 필요한 분
  • 디자이너 · 에이전시로 퍼블리싱 협업이 필요한 분
  • 기존 PC 전용 사이트를 반응형으로 바꾸려는 분
  • 그누보드 · 워드프레스에 새 디자인을 입히려는 분

★클리어 보상

  • 웹표준 HTML · CSS · JS 코드
  • 360px ~ 1920px 반응형 레이아웃
  • 스크롤 · 호버 인터랙션 구현
  • 주요 브라우저 크로스브라우징 검수
  • 원하는 플랫폼에 적용 (선택)

WHO NEEDS

퍼블리싱 외주,
이런 분께 맞습니다

디자인은 있는데 코드로 옮길 손이 부족할 때, 홈페이지 퍼블리싱만 따로 맡길 수 있습니다.

  1. 프리랜서 디자이너

    피그마 · 포토샵으로 만든 시안을 그대로 살려 반응형 웹페이지로 만들어야 할 때

  2. 디자인 에이전시

    여러 프로젝트가 겹쳐 퍼블리싱 인력이 부족할 때 페이지 단위로 나눠 맡길 수 있습니다.

  3. 개발팀 · 스타트업

    백엔드는 직접 개발하고, 화면(HTML · CSS · JS)만 웹표준에 맞춰 받고 싶을 때

  4. 운영 중인 사이트

    그누보드 · 워드프레스 · 카페24 사이트에 새 페이지나 이벤트 페이지를 추가할 때

    퍼블리싱 의뢰 ▶

시안 링크와 페이지 수만 보내 주시면 퍼블리싱 견적 ▶

DESIGN ▶ CODE

시안 그대로,
1px까지 옮깁니다

index.html
<section class="hero">
  <h1>홈페이지 퍼블리싱</h1>
  <p>시안 그대로, 1px까지</p>
  <a href="/contact/">문의</a>
</section>
 
/* 360px ~ 1920px */
@media (max-width: 640px) {
  .hero { padding: 24px; }
}

이런 시안을 받아요

  • Figma
  • Photoshop (PSD)
  • Adobe XD
  • Illustrator (AI)
  • 이미지 (JPG · PNG)
  • 기존 사이트 URL

SCREEN CHECK

6개 해상도에서
하나하나 확인합니다

작은 휴대폰부터 큰 모니터까지, 어느 화면에서도 깨지지 않게 검수합니다.

  • 360px 모바일 ✔ CHECK
  • 768px 태블릿 ✔ CHECK
  • 1024px 태블릿 가로 ✔ CHECK
  • 1280px 노트북 ✔ CHECK
  • 1440px 데스크톱 ✔ CHECK
  • 1920px 와이드 모니터 ✔ CHECK

ITEM BOX

홈페이지 퍼블리싱 기준

보이는 화면뿐 아니라 코드 안쪽까지 챙깁니다.

  • 01

    시맨틱 마크업

    header · main · section 등 의미에 맞는 태그와 제목 구조

  • 02

    반응형 6구간 검수

    360 · 768 · 1024 · 1280 · 1440 · 1920px에서 확인

  • 03

    크로스브라우징

    크롬 · 엣지 · 사파리 · 삼성 인터넷 확인

  • 04

    인터랙션

    GSAP · 스크롤 · 호버 모션을 시안 의도대로

  • 05

    웹 접근성

    대체 텍스트, 키보드 이동, 명도 대비 고려

  • 06

    성능 최적화

    WebP 변환, 이미지 지연 로딩, 불필요한 코드 정리

  • 07

    SEO 마크업

    title · description · 제목 태그 순서 정리

  • 08

    관리하기 쉬운 코드

    일정한 클래스 규칙과 주석으로 유지보수 쉽게

SELECT OUTPUT

원하는 형태로 납품합니다

파일로 받거나, 운영 중인 플랫폼에 바로 적용할 수 있습니다.

  • STATIC

    HTML 파일 납품

    개발사 · 내부 개발팀에 넘길 정적 파일

    • HTML · CSS · JS · 이미지 일체
    • 개발 연동을 위한 구조 정리
    • 수정이 쉬운 클래스 규칙

  • GNUBOARD

    그누보드 적용

    그누보드5 · 영카트 테마에 바로 적용

    • 메인 · 서브 · 게시판 스킨
    • 내용관리 페이지 연결
    • 관리자에서 수정 가능하게

  • WORDPRESS

    워드프레스 적용

    워드프레스 테마로 제작해 적용

    • 테마 · 템플릿 제작
    • 글 · 페이지 편집기와 연결
    • 플러그인 충돌 확인

  • CAFE24

    카페24 적용

    쇼핑몰 스킨에 디자인 적용

    • 메인 · 상품 목록 · 상세
    • 모바일 스킨 함께 작업
    • 운영 기능은 그대로 유지

WORLD MAP

홈페이지 퍼블리싱 과정

메인을 먼저 확인받고 서브로 넓혀 가서 방향이 어긋나지 않습니다.

  1. 1

    시안 전달 · 견적

    디자인 파일과 페이지 수, 원하는 동작을 확인하고 견적을 드립니다.

    ▶ 견적서 · 일정표
  2. 2

    구조 설계

    공통 요소와 반응형 기준을 정하고 마크업 구조를 잡습니다.

    ▶ 마크업 설계
  3. 3

    퍼블리싱

    메인부터 작업해 확인받고 서브 페이지로 넓혀 갑니다.

    ▶ 테스트 주소
  4. 4

    검수

    해상도 6구간과 주요 브라우저에서 차이를 찾아 고칩니다.

    ▶ 검수 리포트
  5. 5

    납품 · 적용

    파일로 납품하거나 원하는 플랫폼에 적용해 마무리합니다.

    ▶ 코드 · 적용 완료

REVIEW

먼저 맡겨 본 분들의 후기

외주 플랫폼에서 실제로 거래한 고객이 남긴 후기입니다.

  • 5.0후기 15건 모두 별점 5점
  • 13/15다시 맡겨 주신 재구매 후기
  • 1~14일작업 기간

  • ★★★★★5.0재구매

    언제나 좋은 퀄리티의 작업물로 빠르게 작업해주셔서 항상 감사드립니다!

    포캠*IT 솔루션 · 기업

    작업 6일30~40만 원2025.03.28

  • ★★★★★5.0

    빠른 응대 감사합니다.

    푸른******

    작업 2일20~30만 원2025.03.21

  • ★★★★★5.0재구매

    원하는 방향으로 수정을 빠르게 도와주십니다.

    즐거********병의원 · 제약

    작업 3일10~20만 원2024.09.30

  • ★★★★★5.0재구매

    약속한 일정보다 항상 빠르게 해주시네요. 이번에도 만족스러운 결과물 입니다.
    수고 많으셨습니다.

    손쉬********IT 솔루션

    작업 1일10~20만 원2024.08.08

  • ★★★★★5.0재구매

    너무 빠른 시간내에 만족할 만한 작업물을 만들어 주셨네요.

    손쉬********IT 솔루션

    작업 1일5~10만 원2024.08.07

  • ★★★★★5.0재구매

    벌써 3번째 작업물 의회입니다.
    원하는대로 착착 만들어 주시네요.

    손쉬********IT 솔루션

    작업 1일5~10만 원2024.07.26

  • ★★★★★5.0재구매

    이 업체는 ~~ 음~~~ 그냥 한마디로 쎈스가 넘쳐 흐릅니다.
    사장님이 디자인 전공 이신가봐요

    파란******

    작업 1일30~40만 원2024.07.25

  • ★★★★★5.0재구매

    최고의 작업물 입니다.
    딱 제가 원하는대로 잘 만들어 주셨어요. 수고 많으셧습니다.

    손쉬********IT 솔루션

    작업 4일30~40만 원2024.07.24

  • ★★★★★5.0재구매

    역시는 역십니다.
    신속한 응대 및 친절하시고 의견 수정 반영 및 피드백을 빠르게 해주셔서 너무 감사했습니다.

    단단*******도소매 · 제조업 · 기업

    작업 3일10~20만 원2024.05.29

  • ★★★★★5.0재구매

    명불 허전 그 자체 입니다~^^ 가성비, 가심비 있게 작업 잘해주셔서 만족도 모두 높습니다~^^ 친절 대응 및 수정 의견 반영 모두 만족합니다~

    단단*******도소매 · 제조업 · 기업

    작업 7일20~30만 원2024.05.09

  • ★★★★★5.0재구매

    결과물도 만족스럽고 빠르고 친절하게 상담해주셨어요! 감사합니다^^

    아티***IT 솔루션

    작업 1일5~10만 원2024.03.15

  • ★★★★★5.0재구매

    매우 만족합니다.
    두번째 작업인데 매번 친절하신 상담과 원하는 만족도 최고 입니다.
    텍스트로만 전달했을뿐인데 알아서 문구에 맞게끔 디자인해주시고 정말 감사합니다.
    추후에도 또 작업의로 맡기겠습니다!!

    TT**

    작업 5일60~70만 원2024.03.05

  • ★★★★★5.0재구매

    이번에도 저희 브랜드 룩에 맞게 진행해주셔서 감사합니다.

    HA**도소매 · 제조업

    작업 3일20~30만 원2024.02.27

  • ★★★★★5.0

    앞으로도 맡기고 진행하겠습니다.
    감사합니다!

    ma********IT 솔루션 · 기업

    작업 14일70~80만 원2024.02.19

  • ★★★★★5.0재구매

    바로바로 응대해주시고 친절한 상담 및 작업물 감사합니다

    TT**

    작업 7일70~80만 원2024.02.13

HELP

홈페이지 퍼블리싱 자주 묻는 질문

Q.디자인 시안이 없어도 퍼블리싱이 되나요?

퍼블리싱은 시안이 있을 때 진행합니다.
시안이 없다면 기획과 디자인부터 함께하는 홈페이지 제작으로 안내해 드립니다.

Q.PC 시안만 있는데 모바일도 되나요?

네. PC 시안의 디자인 규칙을 따라 모바일 화면을 구성합니다.
섹션별로 어떻게 바뀌는지 먼저 공유하고 진행합니다.

Q.피그마 파일은 어떻게 전달하나요?

보기 권한 링크만 주셔도 됩니다.
이미지·아이콘 내보내기가 필요한 경우 편집 권한을 요청드릴 수 있습니다.

Q.개발팀에 넘길 HTML만 받을 수 있나요?

네. 개발 연동을 고려한 구조로 정리해 HTML·CSS·JS 파일로 납품합니다.
반복되는 영역은 따로 구분해 드립니다.

FAQ 전체 보기 ▶

QUEST ACCEPT? ▶

시안만 보내 주세요,
코드는 픽셀노트가 짭니다

디자인 파일 링크와 페이지 수를 알려 주시면 퍼블리싱 견적을 드립니다.

▶ 퍼블리싱 의뢰하기 홈페이지 제작 보기

☎ 010-5266-6849✉ gpwl564@naver.com

▲