우리는 일상생활에서 끊임없이 다양한 웹사이트에 접속하여 정보를 탐색하고, 소통하며, 서비스를 이용합니다. 그러나 이런 웹사이트가 어떻게 만들어지고, 어떠한 과정을 거쳐 우리 앞에 나타나는지에 대해서는 자세히 알지 못하는 경우가 많은데요.
직접 웹사이트를 만들 계획이 있으시거나, 웹사이트 구축 프로젝트를 시작할 예정이시라면 이 글에 주목해 주세요. 웹사이트가 탄생하기까지 준비와 기획, 디자인, 개발, 배포에 이르는 여정을 소개합니다.
✍️ 이 글의 순서
• STEP 1. 프로젝트 준비 및 기획
• STEP 2. 디자인
• STEP 3. 퍼블리싱/개발
• 웹사이트 개발도 결국 ‘소통’이 중요
STEP 1. 프로젝트 준비 및 기획
1-1. 사용자 요구사항 분석하기
먼저 홈페이지 제작을 시작하기 전에, 이 홈페이지가 담고 있어야 할 기능과 사용자의 요구사항을 수집해야 합니다. 고객이 원하는 기능과 서비스를 파악하면, 홈페이지의 목표와 방향성을 더욱 명확하게 수립할 수 있습니다.
1-2. 레퍼런스 찾기
원하는 방향을 찾았다면, 이 자료를 기반으로 레퍼런스를 수집합니다. 레퍼런스는 컨셉과 디자인, 퍼블리싱 레퍼런스 등 구체적인 작업 단계에 따라 쪼개서 찾는 것을 권장합니다.
1-3. 사이트맵 구성하기
웹사이트의 구성을 그려놓은 것을 사이트맵이라고 하는데요. 메인 페이지와 각 페이지에 연결된 서브 페이지를 정리하는 단계입니다. 관련 페이지를 그룹화하여 계층 구조로 만들면 한눈에 보이는 사이트맵을 만들 수 있습니다. 전체 페이지의 분량에 따라 프로젝트의 일정이 변동될 수 있기 때문에, 사이트맵 구성은 기획 단계에서 먼저 진행하는 것이 좋습니다.
1-4. 키 비주얼, 페이지 기획
웹사이트의 첫인상은 인트로 비주얼의 완성도에 달려있습니다. 메인 화면의 컨셉은 전체 홈페이지의 톤앤매너를 나눌 뿐만 아니라, 서브 페이지의 컨셉에도 영향을 미칩니다. 페이지에 따라 특정 기능이 붙는 경우 퍼블리셔 및 개발자와 소통이 필요합니다. 특히 기획 단계는 디자이너, 퍼블리셔와 함께하는 시간이 늘어날수록 전반적인 퀄리티가 높아질 수 있습니다.
STEP 2. 디자인
포토샵이나 일러스트레이터, XD, 스케치 등의 소프트웨어를 활용해 웹사이트 샘플을 만들면서 본격적인 디자인 작업이 시작됩니다. 디자인 단계에서 원하는 애니메이션이 있는 경우, 레퍼런스를 첨부하거나 프로토타입을 만들어 퍼블리셔에게 전달하면 보다 원활한 협업이 가능합니다.
디자인 작업 시 필요한 그래픽 소스의 저작권 범위를 꼭 확인해 주세요. 유료 구매 시에는 상업용으로 구매해야 하며, 온라인과 오프라인의 저작권 범위가 상이할 수 있으므로 꼼꼼하게 확인 후 사용하실 것을 권장합니다.
STEP 3. 퍼블리싱/개발
3-1. 도메인/서버(호스팅) 준비하기
웹사이트가 건축물이라면, 도메인은 웹사이트가 세워질 주소지입니다. 내가 원하는 도메인의 사용 여부를 먼저 확인하신 후 구매하는 것을 권장합니다. 서버(호스팅)는 카페24, 워드프레스 등 다양한 사이트에서 임대하는 방법이 있습니다. 혹은 자체 서버를 구축하는 방법도 있는데요. 대부분은 비용과 보안, 안정성의 문제로 서버를 임대하여 활용하는 방식을 선호한다고 합니다.
3-2. 퍼블리싱 (출판)
메인 페이지와 서브 페이지 각각 퍼블리싱을 진행합니다. ‘퍼블리싱’이란 ‘출판’을 뜻하는데요. STEP 2에서 제작한 디자인이 웹상에 노출될 수 있게 ‘출판’시키는 작업입니다. 실제로 사용할 문장이나 이미지도 준비해 페이지에 링크를 걸거나, 애니메이션으로 동작하도록 코드를 작성하는 일입니다.
3-3. SSL 보안 서버 연결
개인정보를 취급하는 페이지는 의무적으로 SSL 보안 서버에 연결하게 되어있는데요. 보안서버 의무화 대상임에도 구축되지 않았을 경우 1천만 원 이하의 과태료 등의 행정 처분이 있을 수 있습니다. 최근에는 이 SSL 보안 인증이 필수로 여겨지고 있으니 참고하시기 바랍니다.
3-4. 추가 작업 – GA4 연결하기, SEO 점검
구글 애널리틱스(Google Analytics)를 활용하면 어떤 페이지가 가장 많은 트래픽을 얻고 있는지, 어떤 경로로 유입이 많이 되는지 알 수 있습니다. 웹사이트의 성과를 가장 직관적으로 확인할 수 있는 방법 중 하나로, 기업용 웹사이트에는 필수적이라고 할 수 있습니다.
또한 검색엔진최적화(Search engine optimization)은 검색 엔진에서 우리 웹사이트가 잘 노출될 수 있도록 최적화하는 작업을 의미하는데요. 아무리 잘 만든 웹사이트라도 사용자가 유입되지 않는다면 의미가 없겠죠. 따라서 SEO가 잘 갖추어질 수 있도록 UX/UI 측면에서 한 번 더 점검이 필요합니다.
웹사이트 개발도 결국 ‘소통’이 중요
웹사이트를 개발하고, 구축할 때 가장 중요한 것은 ‘협업’입니다. 기획, 디자인, 개발 단계에서 원활한 소통이 이루어져야만 좋은 웹사이트를 만들 수 있습니다. 특히 내부적으로 개발자 인력이 없는 경우, 외주 업체를 활용해 홈페이지를 구축하는 경우가 많은데요. 이 경우, 내부 인력이 아니다 보니 즉각적인 커뮤니케이션이 되지 않아 제작 과정에서 어려움을 겪는 사례가 많습니다.
웹사이트를 처음 계획한 의뢰인의 입장에서는, 요구사항을 이해하지 못하는 실무자가 답답하게 느껴질 수도 있습니다. 하지만 서로 원하는 의도를 한 번에 파악하기란 사실 어려운 일입니다. 그 간극을 줄이기 위해서는 서로 계속 소통하는 방법 뿐이죠. 다만, 개발 지식이 없는 사람 입장에서는 개발자의 설명을 듣고도 와닿지 않을 수 있는데요. 개발 과정을 알고 있다고 해도 진행 상황에 대한 세부적인 검토는 개발 지식이 없으면 완벽하게 이해하기 어려운 게 사실입니다.
대안은 ‘위시켓’입니다.
그래서 이 간극을 위시켓이 줄여 드리고 있습니다. 웹사이트 개발이 처음이거나, 경험과 지식이 적은 분들을 위해 위시켓 매니저가 진행 전 과정을 1:1로 돕고 있습니다. 아래는 위시켓이 웹사이트 개발 과정에서 돕는 대표적인 포인트들입니다.
• 견적 상담 ➔ 지원업체 모집, 검토 ➔ 미팅 ➔ 계약서 작성 ➔ 일정 관리 ➔ 분쟁 중재
만약 웹사이트 개발에 위와 같은 도움이나 지원이 필요하다면, 아래 링크를 눌러 위시켓을 통해 프로젝트를 진행해 보세요.
🔖 함께 보면 도움되는 글
웹사이트 제작, 기획부터 퍼블리싱까지 한 번에 해결한 아이피라운지
