웹사이트 개발 범위
개발은 Dardo의 웹 디자인을 바탕으로 진행할 수도 있고, 고객사 팀이나 다른 스튜디오가 제공한 디자인으로 시작할 수도 있습니다. 어느 쪽이든 제안서에는 개발할 템플릿, 상태, 연동 항목과 각 자료를 누가 제공하는지, 각 부분을 어떻게 검수하는지가 명시됩니다.
- 합의된 모든 템플릿과 상태의 반응형 프런트엔드 구현
- 콘텐츠 모델, CMS 설정, 게시 워크플로
- 폼과 합의된 연동 기능, 실제 제출로 테스트
- 메타데이터, 구조화 데이터, 크롤링 가능한 페이지 구조
- 대표 페이지의 접근성 및 성능 점검
- 출시 점검, 배포, 인수인계 문서
웹 개발부터 시작하면 좋은 경우
디자인이 확정되었거나 거의 확정된 상태에서 위험 요소가 개발 단계에 있다면 여기서 시작하세요. 예를 들면 팀이 직접 게시해야 하는 콘텐츠, 다른 시스템의 데이터, 올바른 담당자에게 전달되어야 하는 폼, 실제 휴대폰에서의 성능 같은 경우입니다. 디자인, 페이지 목록, 연동 목록을 준비해 주세요. 마케팅 웹사이트, 로그인 대시보드, 결제 시스템은 검수 기준이 서로 다르므로 견적 전에 먼저 정의합니다.
아직 디자인이 없다면 둘 다 포함하는 맞춤 웹 디자인으로 시작하세요. 모션, WebGL, 3D가 중심인 프로젝트라면 크리에이티브 개발이 더 잘 맞습니다. 핵심 범위가 복잡한 로그인 기반 제품이나 긴 엔터프라이즈 연동 프로그램이라면 더 큰 애플리케이션 개발 팀이 나을 수 있으며, 그런 경우 초기에 말씀드립니다.
개발에 사용하는 기술 스택
기술 스택은 프로젝트별로 선택하고 그 이유를 제안서에 설명합니다. 공개된 작업물은 TypeScript 기반의 Astro와 Next.js를 사용하며 Cloudflare Workers 또는 Vercel에 배포했습니다. 콘텐츠 중심의 마케팅 사이트에는 Astro가 적합합니다. 페이지를 미리 HTML로 렌더링하고 필요한 컴포넌트에만 JavaScript를 전달하므로 페이지가 가볍고 검색 엔진이 읽기 쉽습니다. Next.js는 애플리케이션에 가까운 인터페이스에 알맞습니다.
결제, 계정, 다른 서비스의 데이터처럼 서버 로직이 필요한 사이트에는 모든 페이지를 앱으로 만드는 대신 필요한 곳에만 추가합니다. Astro로 만든 공개 프로젝트 리더보드 Superame는 순위를 Neon 데이터베이스에 저장하고 구매자를 호스팅 결제 페이지로 보내며, 서버가 서명된 결제 콜백을 하나하나 검증한 뒤 크레딧을 추가합니다. 팀이 특정 CMS나 플랫폼을 계속 써야 한다면 브리프에 적어 주세요. 견적 전에 저희가 적합한 팀인지 먼저 알려드리겠습니다.
팀이 실제로 쓸 수 있는 CMS
콘텐츠 관리 시스템은 필드 구성이 팀의 게시 방식과 맞아야 도움이 됩니다. 개발에 앞서 콘텐츠 유형, 필드별 편집 담당자, 승인이 필요한 항목, 고정 레이아웃 페이지와 재사용 가능한 항목을 구분해 정리합니다. A medio tono에서는 프로그램과 강사가 직접 만든 페이지가 아니라 관리 가능한 항목이며, 강좌 링크를 누르면 해당 악기로 이미 필터링된 강사 목록이 열립니다.
Dardo의 웹사이트도 같은 방식으로 운영됩니다. 페이지는 Cloudflare에서 제공되는 정적 Astro 빌드이고, 글은 별도의 헤드리스 CMS에서 작성하며, 글을 게시하면 다시 빌드가 실행됩니다. 정적 결과물 덕분에 호스팅이 단순하고 페이지가 빠르며, 편집자는 코드를 건드릴 필요가 없습니다.
연동, 폼, 성능
개발은 라우트 목록과 연동 맵에서 시작합니다. 각 폼이나 API가 해야 할 일, 고객사가 소유해야 하는 외부 서비스 계정, 서비스가 느리거나 실패할 때 방문자에게 보이는 화면을 정리합니다. 잘 다듬어진 프런트엔드가 정해지지 않은 문의 처리 흐름을 가릴 수도 있기 때문에, 출시 전에 실제 테스트 제출을 보내 올바른 곳에 도착하는지 확인합니다.
성능은 나중에 챙기는 것이 아니라 검수 항목의 일부입니다. 테스트할 템플릿과 기기를 합의하고, 출시 전에 로딩 동작과 페이지 용량을 확인합니다. A medio tono는 운영 환경에서 Vercel Analytics와 Speed Insights를 사용하고 있으며, Janus Observatory 구현에는 번들 예산과 브라우저 QA, 빌드와 시각적 회귀를 확인하는 릴리스 워크플로가 포함됩니다.
다지점 및 프랜차이즈 웹사이트
사무소, 병원, 매장, 가맹점이 여러 곳인 기업에는 하나의 브랜드 시스템과 하나의 콘텐츠 모델, 그리고 각 지점의 주소, 영업시간, 팀, 서비스, 사진, 해당 지점에 직접 연락하는 방법을 담은 실제 페이지가 필요합니다. 본사는 공통 페이지와 브랜드를 관리하고, 각 지점은 자기 정보만 수정하며, 역할 설정으로 둘을 분리합니다.
Google은 지점마다 비즈니스 프로필을 하나씩 두고 해당 지점을 대표하는 웹사이트 페이지를 만들 것을 요구하며, 각 지점을 고유한 URL로 따로 마크업하도록 권장합니다. 저희는 이 방식으로 지점 페이지와 구조화 데이터를 만듭니다. 사무소가 없는 지역의 도시 페이지를 복제해 만들지는 않습니다. 지역명만 바꾼 페이지는 도어웨이 페이지로 취급되기 때문입니다.
출시 전 테스트 방법
나머지 템플릿을 완성하기 전에 대표 페이지 하나를 만들어 합의된 화면 크기에서 테스트합니다. 문제를 수정 비용이 적을 때 발견하기 위해서입니다. 검수 범위는 다음과 같습니다.
- 키보드 사용 및 눈에 보이는 포커스
- 긴 콘텐츠, 짧은 콘텐츠, 빠진 콘텐츠에서도 레이아웃이 깨지지 않는지
- 로딩, 빈 화면, 오류 상태와 애니메이션이 있는 경우의 동작 줄이기 설정
- 실제 수신처로의 폼 전달과 확인 메시지
- 정규 URL, 리디렉션, 메타데이터, 구조화 데이터
- 분석 이벤트, 동의 동작, 운영 환경 연동
코드 소유권과 인수인계 시 제공 항목
인수인계 문서에는 저장소, 호스팅, 도메인, CMS, 접속 정보, 문서, 유지보수 담당자가 명시되어 있어 출시 후에도 웹사이트를 문제없이 운영할 수 있습니다. 플랫폼이 허용하는 한 고객사가 직접 관리하는 호스팅과 계정을 권장하며, 작업을 시작하기 전에 제안서에 코드, 디자인 자산, 라이선스가 필요한 종속 요소의 소유권을 명시합니다.
고객사와 같은 시간대에서 일하는 니어쇼어 팀
Dardo는 보고타에 있는 3인 팀으로, 창립자 Nicolás Cerón이 이끌고 있어 코드를 직접 작성하는 사람들과 바로 소통하실 수 있습니다. 보고타는 일 년 내내 UTC−5를 사용하므로 서머타임 기간에는 미국 중부 시간, 그 외 기간에는 미국 동부 시간과 같아서 회의, 검토, 출시일이 모두 고객사의 일반 업무 시간 안에 들어옵니다. 문의 양식의 예산 범위는 USD 5,000 미만부터 60,000 초과까지 있어 프로젝트 규모에 맞게 선택하실 수 있습니다.
선택하기 전에 궁금한 점
웹사이트 개발 비용은 얼마인가요?
작업 내용에 따라 달라집니다. 템플릿과 상태의 수, 콘텐츠 이전, CMS 요구 사항, 연동, 언어, 접근성, 애니메이션, 테스트, 인수인계가 영향을 줍니다. 페이지당 단가 같은 일률적인 기준 대신 이러한 요소를 검토한 뒤 문서화된 범위에 따라 비용을 산정하며, 제안서에는 일회성 개발 비용과 반복되는 호스팅 및 소프트웨어 비용을 구분해 표기합니다.
웹 디자인과 웹 개발은 어떻게 다른가요?
웹 디자인은 사이트가 무엇을 말하고, 어떻게 구성되며, 어떻게 보이고 동작할지를 결정합니다. 웹 개발은 그 결정을 템플릿, 콘텐츠 관리, 양식, 연동, 성능, 배포 같은 실제 작동하는 코드로 만듭니다. 실제 콘텐츠가 들어가면 깨지는 레이아웃이나 오류 상태가 없는 양식처럼 두 영역 사이에서 생기는 문제가 많아, Dardo는 두 작업을 한 팀에서 맡거나 외부 디자인을 구현 전에 검토합니다.
이미 가지고 있는 디자인으로 개발할 수 있나요?
네. 먼저 반응형 상태, 극단적인 콘텐츠 사례, 인터랙션, 누락된 로딩 또는 오류 동작이 있는지 디자인을 검토한 뒤 디자인 담당자와 구현 검수 기준을 합의합니다. 빠진 부분은 견적 전에 목록으로 정리하므로 개발 도중 디자인되지 않은 상태가 발견되는 일이 없습니다. 디자인에 상당한 보완이 필요하다면 코드에서 임기응변으로 처리하지 않고 별도 범위로 산정합니다.
어떤 CMS를 사용하시나요?
누가, 얼마나 자주, 어떤 종류의 콘텐츠를 게시하는지에 따라 다릅니다. 콘텐츠 중심 사이트에는 정적 Astro 빌드와 헤드리스 CMS의 조합이 잘 맞습니다. 편집자는 편집 인터페이스에서 글을 쓰고, 게시하면 사이트가 다시 빌드됩니다. 애플리케이션에 가까운 사이트라면 콘텐츠를 앱 자체 데이터베이스에 둘 수도 있습니다. 제안서에는 CMS 이름과 선택 이유, 라이선스 또는 구독 비용이 있다면 그 내용까지 명시합니다.
Next.js 대신 Astro를 쓰는 때는 언제인가요?
마케팅 사이트, 출판물, 서비스 소개 페이지처럼 대부분의 페이지가 미리 렌더링할 수 있는 콘텐츠라면 기본적으로 JavaScript를 거의 또는 전혀 보내지 않는 Astro를 사용합니다. 인터페이스 대부분이 애플리케이션처럼 동작한다면 Next.js가 적합합니다. 공개된 작업에는 두 가지가 모두 있습니다. Dardo 자체 사이트와 Superame는 Astro로, A medio tono와 Janus Observatory는 Next.js로 운영됩니다.
프로젝트가 끝나면 코드의 소유권은 누구에게 있나요?
작업을 시작하기 전에 제안서에 코드, 디자인 자산, 계정, 라이선스가 필요한 종속 요소의 소유권을 명시합니다. 호스팅, 도메인, 저장소는 처음부터 고객사가 관리하고 접근 방법을 문서화하는 방식을 권장하며, 그래야 다른 팀이 처음부터 다시 만들지 않고도 이어서 작업할 수 있습니다. 서드파티 폰트, 서비스, 플러그인은 각자의 라이선스를 따르며, 출시 후 예상치 못한 일이 없도록 그 목록을 알려 드립니다.
출시 후에도 웹사이트를 유지보수해 주시나요?
포함할 수 있습니다. Dardo가 사이트를 계속 지원하는 경우 제안서에 업데이트, 수정, 소규모 변경 등 유지보수 범위와 요청 처리 방식을 정해 둡니다. 그렇지 않다면 고객사 팀이나 다른 개발자가 인계받는 데 필요한 저장소, 문서, 계정을 전달해 드립니다. 어느 경우든 소유권은 출시 후에 협의하는 것이 아니라 출시 전에 확정합니다.
웹사이트 개발에는 얼마나 걸리나요?
템플릿과 상태의 수, 연동, 콘텐츠 이전, 디자인과 콘텐츠의 승인 속도에 따라 달라지므로 정해진 기간을 말씀드리는 대신 제안서에서 일정을 정합니다. 대표 페이지 하나를 먼저 만들어 테스트하면 나머지 템플릿을 만들기 전에 작업 속도와 품질을 양측이 구체적으로 미리 가늠할 수 있습니다.
사내 팀과 함께 작업할 수 있나요?
네, 정해진 범위 안에서 가능합니다. 웹사이트 전체를 만들 수도 있고, 고객사 디자이너의 디자인을 구현하거나 고객사 개발자가 구현할 디자인을 전달할 수도 있으며, 역할 분담은 제안서에 명시합니다. 시작 전에 저장소, 검토 절차, 회의 시간, 각 결과물의 승인 담당자를 합의하며, 미국 업무 시간과 겹치는 UTC−5 시간대에서 영어 또는 스페인어로 작업합니다.
출처 및 추가 자료
이 페이지의 출처이며, 원 발행처의 더 자세한 내용도 확인하실 수 있습니다.
- Google 비즈니스 프로필 가이드라인support.google.com
- Google 검색 센터: 지역 비즈니스 구조화된 데이터developers.google.com
- Google 검색 센터: 스팸 정책(도어웨이 남용)developers.google.com
