웹 퍼블리싱ㅣ피그마 시안 그대로 반응형 코딩

하루 5만 명이 들어오는 페이지와 사내 화면 10여 종을 만들어 운영했습니다

캠페인이 도는 날 기준 약 5만 명이 들어오는 광고 랜딩페이지를 만들고 운영했습니다. 사람이 몰릴 때 화면이 늦게 뜨지 않도록 하는 부분까지 신경 씁니다.

화면만 만들고 끝난 것이 아니라, 만든 화면이 실제로 돌아가는 서비스에 붙는 것까지 해 왔습니다. 그래서 뒤에 개발이 붙을 것을 염두에 두고 구조를 정리해 드립니다.

─────────────────────

시안 링크와 페이지 목록, 희망 마감일만 주세요

이 세 가지만 보내주시면 페이지별 작업량을 확인해 금액과 일정을 바로 안내드립니다. 피그마는 보기 권한이 있는 링크로, 이미지나 PSD는 파일로 주셔도 됩니다.

평균 1시간 이내에 답변드립니다.

퍼블리싱은 시안이 얼마나 확정돼 있는지에 따라 작업량이 크게 달라집니다. 디자인부터 필요하시면 전담 디자이너가 있는 다른 서비스로 안내드리겠습니다. 따로 맡기시는 것보다 한 번에 진행하는 편이 저렴합니다.

─────────────────────

시안 그대로 화면으로 옮깁니다

· 레이아웃, 폰트, 간격, 색상을 시안 기준으로 맞춰 구현

· PC와 휴대폰 양쪽 대응

· 크롬, 사파리, 엣지에서 같은 화면이 나오는지 확인

· 탭, 아코디언, 모달, 슬라이더 등 필요한 움직임 구현

브라우저에서 구현이 불가능하거나 화면 크기에 따라 깨지는 부분은 미리 말씀드리고 대안을 제안한 뒤 진행합니다.

─────────────────────

직접 눌러보실 수 있습니다

로그인 없이 바로 열리는 데모입니다.

표와 필터가 많은 화면

https://funnel-portfolio.vercel.app/hr-hub

13개 항목 정렬, 다중 조건 필터, 검색, 조직도 전환까지 붙어 있는 화면입니다. 표가 많은 시안일수록 퍼블리싱 난이도가 올라가는데, 그런 화면을 어떻게 정리하는지 보실 수 있습니다.

그래프가 많은 화면

https://funnel-portfolio.vercel.app/ad-performance

차트와 수치가 섞인 대시보드형 시안이 실제로 어떻게 구현되는지 확인하실 수 있습니다. PC와 휴대폰 양쪽에서 열어보시면 반응형이 어떻게 동작하는지도 함께 보실 수 있습니다.

─────────────────────

만들어 온 화면들

· 캠페인 하루 약 5만 명이 들어오는 광고 랜딩페이지

· 사내에서 매일 쓰는 화면 10여 종, 120명이 사용

· 모바일 중심 판매 사이트 (사업자가 운영 중)

─────────────────────

개발팀에 넘기실 것도 정리해 드립니다

파일을 넘겨 드리는 것으로 끝내지 않습니다. 어디를 고치면 어떤 화면이 바뀌는지 정리해 드리고, 개발팀에 넘기실 경우 바로 붙을 수 있는 형태로 정리해 드립니다.

납품일로부터 30일간은 시안과 다르게 구현된 부분이나 오류를 무상으로 잡아 드립니다.

─────────────────────

퍼블리싱이 처음이시라면

· 퍼블리싱 - 디자이너가 만든 그림 파일을 브라우저에서 실제로 보이고 눌리는 화면으로 바꾸는 작업

· 시안 - 디자이너가 그려 준 화면 그림

· 반응형 - 컴퓨터와 휴대폰 화면 크기에 맞춰 배치가 자동으로 바뀌는 것

· 크로스브라우징 - 어느 브라우저로 열어도 똑같이 보이게 맞추는 것

─────────────────────

금액 기준

· 3만원 - PC 기준 1페이지. 시안 그대로 구현하고 브라우저별 확인까지

· 8만원 - PC와 휴대폰 양쪽 대응. 1페이지 기준

· 20만원 - 탭, 모달, 슬라이더처럼 움직이는 요소까지 포함

페이지 수, 화면 길이, 움직이는 요소의 난이도에 따라 작업량이 달라집니다. 구매 전에 시안 링크와 페이지 목록, 희망 마감일을 보내주시면 정확한 금액을 바로 안내드리겠습니다.

1. 시안과 페이지 목록을 보내 주세요

시안 링크, 페이지 목록, 희망 마감일 세 가지면 됩니다. 받는 즉시 페이지별 작업량을 확인해 금액과 일정을 안내드립니다. 평균 1시간 이내에 답변드립니다.

2. 구현 범위를 먼저 맞춥니다

PC만인지 휴대폰까지인지, 움직이는 요소가 어디까지인지 확인합니다. 브라우저에서 구현이 어려운 부분은 이때 미리 말씀드리고 대안을 제안합니다.

3. 금액과 일정을 확정합니다

정리된 범위를 기준으로 금액과 기간을 정하고 결제를 진행합니다. 시안이 바뀌면 그때 다시 협의합니다.

4. 작업 중간에 화면을 보여 드립니다

다 만든 뒤에 처음 보시는 일이 없도록, 진행 중에 눌러볼 수 있는 화면을 공유합니다.

5. 납품하고 인수인계 자료를 드립니다

어디를 고치면 어떤 화면이 바뀌는지 정리해 드리고, 개발팀에 넘기실 경우 바로 붙을 수 있는 형태로 정리합니다. 납품일로부터 30일간 시안과 다르게 구현된 부분이나 오류를 무상으로 잡아 드립니다.

문의가 필요한 항목(견적 확정)

페이지 수, 화면 길이(스크롤 분량), 반응형 범위, 인터랙션 난이도에 따라 작업량이 달라져 비용/기간이 달라질 수 있어요.

구매 전 문의로 시안 링크와 페이지 목록, 희망 마감일을 보내주시면 가장 정확하게 안내드리겠습니다.

​

문의 시 보내주시면 빠릅니다

- 디자인 시안 링크(또는 이미지/PSD), 페이지 수/메뉴 구조, 반응형 필요 여부(모바일 포함), 참고 사이트, 희망 마감일