brunch

라이킷 97 댓글 6

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 티그리스 디자인팀 Jan 30. 2023

홈페이지 제작 순서, 정확히 알고 있나요?

IT기업에서 진행한 홈페이지 리뉴얼 프로세스

온라인 쪽에서 일하고 있는 디자이너라면 누구나 한 번쯤 해봤을 프로젝트가 하나 있습니다.

바로 홈페이지 리뉴얼인데요. 티그리스 디자인팀도 작년 초 만들어진 후 가장 먼저 진행한 프로젝트가 홈페이지 리뉴얼 제작이었습니다.
간혹 홈페이지 리뉴얼이 쉽다고 생각하는 분들도 계시겠지만(수많은 광고들이 쉽다고 말하죠..)

사실은 쉽고 간단한 업무가 아닌, 많은 팀들과 긴밀하게 협업해야 좋은 결과물을 뽑을 수 있는 작업입니다.

그럼 홈페이지 리뉴얼을 어떤 과정을 통해 진행해야 하는지 정리해 보겠습니다.

이 글은 저희 티그리스 홈페이지를 작업하며 정리한 과정입니다. 홈페이지의 성격에 따라 순서, 작업 방식이 다를 수 있는 점 감안하고 읽어주시면 좋을 것 같습니다.

티그리스 홈페이지 리뉴얼 프로젝트는 매주 1회씩 주간 대면 미팅을 진행하였습니다. 기획은 주로 PPT, 디자인은 피그마로 공유했으며 그 외에 전반적인 커뮤니케이션은 티그리스 서비스의 채팅과 커뮤니티를 통해 소통하였습니다.

준비

1) 전체 킥오프 및 기존 홈페이지 문제점 찾기

기존 홈페이지 문제점

홈페이지 리뉴얼 목적을 위해 이해관계자 모두가 킥오프를 진행합니다. 새로운 홈페이지는 기존 홈페이지의 문제점을 보완하기 위한 목적이 크기 때문에 왜 리뉴얼을 해야 하는지에 대한 명확한 이유를 찾는 것이 가장 중요합니다. 그 이유를 찾지 못한 채 리뉴얼을 하면 하나의 페이지에서 수십 가지 각기 다른 이야기가 펼쳐질 수 있기 때문입니다.

2) 레퍼런스 찾기

원하는 방향에 대한 레퍼런스를 찾습니다. 레퍼런스는 컨셉 레퍼런스, 디자인 그래픽 레퍼런스, 퍼블리싱 레퍼런스 등 구체적으로 쪼개서 찾는 방법이 좋습니다. 이 단계에서는 기획자, 디자이너, 퍼블리셔가 함께 많은 의견을 나누고 서로의 생각을 모으기 위해 많은 대화를 해야 합니다. 좋은 레퍼런스를 찾는 것도 중요하지만, 보여주고자 하는 이야기를 잘 섞어서 우리 홈페이지에 녹여야 하니까요.

3) 프로젝트 일정

이해를 돕기 위한 샘플 일정 자료

프로젝트 시작 전 전체 일정을 먼저 잡습니다. 일정을 잡기 전, 작업 분량과 레퍼런스 내용을 통해 방향을 먼저 세우고 정리된 내용에 따라 일정을 잡습니다. 작업 스케일에 따라 일정이 유동적으로 바뀔 수 있기 때문에 이 점을 항상 염두에 두고 일을 진행해야 합니다. 정기적으로는 매주 주간 미팅을 잡아 작업 업데이트 사항을 서로 공유합니다.

준비 단계에서 컨셉이 정해지면 실무자가 모두 함께 전체 미팅 후 본격적인 기획이 들어갑니다.

기획

1) 사이트맵 구성

홈페이지 사이트맵 구성

초반 준비 단계 시 가볍게 먼저 잡고 기획 단계에서 구체적으로 짜는 방향이 좋습니다. 전체 페이지 양에 따라 프로젝트 작업 일정이 변동될 수 있기 때문입니다. 티그리스 홈페이지의 경우, 초반에 서브 페이지 양이 많았지만 일정이 당겨지면서 이에 맞게 할 수 있는 범위로 작업량을 조절하였습니다.

2) 페이지별 콘텐츠 구성

메인 키비주얼 기획

(왼)초기 기획한 3D 형태 소스 출처 : 프리픽 (오)기획안 시안 속 이미지 출처 : 잔디, 아사나

키 비주얼을 어떤 컨셉과 디자인으로 풀지도 중요한 포인트 중 하나입니다. 인트로 비주얼 하나로 전반적인 홈페이지의 톤 앤 매너 컨셉을 알 수 있으며, 서브 페이지에도 잘 녹여야 하기 때문입니다. 티그리스 홈페이지의 경우, 처음엔 3D 일러스트로 화려한 인트로를 고민했습니다.

하지만, 업무를 쉽고 빠르게 한다는 핵심 포인트를 잡아 이에 걸맞은 쉬운 목업 화면 이미지와 간단한 3D 오브제 요소로 변경했습니다. 비주얼보다는 우리가 말하고자 하는 핵심 컨셉과 스토리에 집중했기 때문에 노선을 빠르게 변경하여 진행할 수 있었습니다.

메인 및 서브페이지 기획

기획안 시안 속 이미지 출처 : 카카오워크

메인 페이지부터 서브 페이지까지 각 페이지별 들어갈 콘텐츠를 준비합니다. 페이지에 따라 기능이 붙는 경우 퍼블리셔 및 개발자와 소통하여 진행합니다.

모든 기획이 끝나면 디자인으로 넘어갑니다.

기획 단계에서 디자이너, 퍼블리셔가 함께 참여하면 작업 전 이해도가 높아지며, 협업 싱크로율이 올라가 전반적인 퀄리티를 더 높일 수 있습니다.

디자인

1) 메인 페이지 디자인

홈페이지의 첫 얼굴인 메인 페이지는 가장 중요한 역할을 합니다. 임팩트 있는 비주얼도 중요하지만 그보단 스토리가 담긴 구성이 더 중요합니다. 페이지를 구성을 보면서 클릭이 가능해 이동할 수 있어야 하고, 사용자에게 다양한 선택지를 주어 고를 수 있게 해야 합니다.

2) 서브페이지 디자인

서비스의 자세한 내용을 소개하는 페이지로 카테고리별로 묶어서 구성합니다. 서브 페이지 하단에는 문의나 다른 페이지로 유도하는 배너를 넣는 것도 사용자 이탈률을 줄이는 방법 중 하나입니다.

디자인 단계에서 원하는 애니메이션이 있는 경우 동일한 기능의 레퍼런스를 찾거나 프로토타입을 만들어 퍼블리셔에게 전달합니다.

디자인 작업 시 필요한 그래픽 소스는 직접 제작 혹은 유료 구매 후 사용합니다. 유료 구매 시 상업용으로 구매해야 하며 온라인과 오프라인 저작권 범위를 정확히 확인 후 구매합니다.

기획과 디자인만 잘 나온다고 끝나는 게 아닙니다. 결국은 마지막 구현을 어떻게 하냐가 가장 중요하니까요. 마지막 단계, 퍼블리싱으로 넘어갑니다.

퍼블리싱 & 개발

1) 홈페이지 준비 사항

도메인 검색 - 이해를 돕기 위한 예시 이미지

도메인 준비 : 원하는 사이트 주소

서버 준비

가비아, 카페 24, 고도몰 등 다양한 사이트에서 쉽게 구매할 수 있습니다. 도메인의 경우 아래 링크를 통해 내가 원하는 도메인을 누군가 사용 중이진 않은지 먼저 확인 후, 구매하는 방법을 추천합니다.

https://domains.hosting.kr/search

domains.hosting.kr

domains.hosting.kr

2) 메인 페이지 퍼블리싱

메인 페이지와 서브 페이지는 구성이 다르기 때문에 퍼블리싱을 할 때에도 스타일시트를 메인용 CSS와 서브용 CSS로 나눠서 작업합니다.

인터렉션이 가장 많이 들어가는 화면도 메인 페이지이기 때문에, 애니메이션 라이브러리를 찾아 두는 게 좋습니다. 티그리스 홈페이지에서는 GSAP를 사용했습니다.

3) 서브 페이지 퍼블리싱

레이아웃이 중복되는 페이지가 많을 때에는 레이아웃을 토대로 유형을 나눠 ‘틀’이 되는 페이지를 먼저 잡습니다. 이때 중복해서 쓸 수 있는 요소들은 확장성을 고려하여 작업합니다. 몇 가지 틀을 잡은 후에는 내용(글)을 수정하여 각 서브 페이지를 만듭니다.

4) SSL 보안 서버 연결

개인정보를 취급하는 페이지의 경우 SSL 보안 서버 연결은 필수입니다.

*정보통신망 이용촉진 및 정보보호 등에 관한 법률에 의해 개인정보를 취급하는 모든 웹사이트는 보안서버 의무화 대상이며, 구축되지 않았을 경우 1천만 원 이하의 과태료 등 행정처분이 있을 수 있습니다.

이후 운영

홈페이지 작업이 끝난 뒤 마케팅팀은 필요한 사항을 퍼블리셔에게 요청합니다.

1) 구글 애널리틱스 연결 요청

구글 애널리틱스를 연결하면 어떤 페이지에서 가장 많은 트래픽이 오는지 알 수 있습니다.

또한, 가장 많은 사람들이 이탈하는 페이지도 확인할 수 있기 때문에 추후 리뉴얼 진행 시 해당 페이지를 개선할 수 있습니다.

2) 검색최적화(SEO)를 위한 UX/UI 최종 점검

검색 유입을 늘리기 위해서는 메타태그를 잘 작성해야 한다.

홈페이지 검색최적화를 위해 필요한 사항을 퍼블리셔와 함께 세팅 후 모니터링 합니다.

이 작업을 통해 어떤 키워드로 검색 유입량이 많은지 알 수 있습니다. 위의 운영을 통해 추후 리뉴얼 진행 시 데이터 기반하여 리뉴얼을 진행하는 것이 중요합니다. 홈페이지를 통해 지속적인 운영이 필요한 곳이라면 이 점을 꼭 유의하여 진행하시면 좋을 것 같습니다.

홈페이지를 개발할 때 검색 최적화에 도움을 주는 또 다른 중요한 요소 [알아두면 쓸모 있는 시맨틱 마크업] 편도 기대해 주세요!

마치며

홈페이지 리뉴얼을 진행하며 가장 중요한 건 ‘협업’이라고 생각합니다.

기획, 디자인, 개발 직군이 모두 모여 소통이 잘 됐을 때 원하는 홈페이지를 구현할 수 있습니다. 내부에서 진행하려면 적어도 5명~10명 내외 혹은 회사 규모에 따라 상사들을 포함한 그 이상의 많은 사람들과 소통한다는 점도 홈페이지 리뉴얼이 쉽지 않은 이유 중 하나입니다.

하지만, 서로 리뉴얼 방향에 대해 정확히 이해하고 작업을 한다면 더 좋은 아이디어가 많이 나올 수 있습니다. 협업이 필요한 작업이면서 동시에 소통을 하면 할수록 더 좋은 퀄리티를 가져갈 수 있는 작업이기도 합니다. 그런 점에서 티그리스 홈페이지는 촉박한 일정이었지만, 많은 소통을 한 덕분에 원하는 홈페이지를 구현할 수 있었습니다. 작년 3월에 작업했으니 벌써 1년이 되어갑니다. 곧 2차 오픈을 위해 몇 가지 보완하여 부분 리뉴얼 진행 계획이 있는데요. 1년 전 초심을 생각하며 이 글을 썼습니다.

모두에게 잘 맞는 작업 방법이 있듯이 위 작업 과정을 참고하여 본인만의 작업 순서를 만들어보는 것도 추천합니다.

[번외 글 - 인하우스가 아닌 경우]

고객사의 홈페이지를 만들 경우에도 그들의 정확한 니즈 파악이 가장 중요합니다.

보통 고객사 담당자는 본인 머릿속에서 상상의 나래를 펼치지만, 작업하는 실무자에게 전달하는 과정은 쉽지 않습니다. 그 간극을 줄이기 위해 할 수 있는 일은 계속해서 물어보는 방법뿐이죠.

서로 원하는 의도를 정확히 파악하는 것, 하고 싶은 이야기를 하는 게 아니라 공감하고 이해하는 능력이 필요합니다. 그래야 그들이 생각하는 것 이상을 제안할 수 있고 디자이너가 클라이언트에게 휘둘리지 않으며 프로젝트를 끌고 갈 수 있으니까요.

결국 어떤 프로젝트를 진행하건 간에 소통만큼 중요한 건 없는 것 같습니다.

그러니 쉽게 다른 사람의 의도를 추측하며 판단하지 말고 한 번 더 물어보면서 일하면 어떨까요?

오늘 하루도 함께 일하는 사람들과 소통하는 하루를 보내시길 바랍니다 :)