‘예쁘지만 날이 무뎌진 칼’

vs

‘단순하지만 날이 살아있는 칼’





여러분이 주부라면 어떤 칼을 선택하실 건가요? 대부분 후자를 택하실 겁니다.

홈페이지 기획도 마찬가지입니다. ‘타깃이 누구인지’, ‘타깃이 원하는 것이 무엇인지’ 정의하는 것부터 시작하는데요.

많은 분들이 이 ‘기획’ 단계를 하지 않거나 혹은 잘못하곤 합니다. 그렇기에 몇몇은 의도와 전혀 다른 방향으로 가는 경우도 있습니다.

예전에 저희 긱다이브를 찾아오셨던 고객님 중 학원 원장님이 계셨습니다. 학원 사이트를 살펴보니 썩 나쁘지 않은 디자인이었지만 정보들이 여기저기 복잡하게 배치되어 학부모들의 이탈을 유발할 것으로 보였습니다.

저희와 리뉴얼을 진행하였고 1) 좀 더 간결한 이미지를 넣었습니다. 또한 2) 주요 프로그램과 3) 상담 신청 버튼을 첫 화면에 배치하고, 4) 필요 없는 요소들을 줄였습니다. 그 결과, 문의와 상담 신청이 눈에 띄게 증가하였습니다.

오늘은 긱다이브가 사이트 제작 혹은 리뉴얼 시, 진행하는 올바른 방법에 대해 알려드리겠습니다. 오늘 글이 대표님들께 많은 도움이 될 거라 생각합니다.

01. 고객을 생각하는 페르소나 기법



‘고객의 나이, 성별, 직업, 고민, 성격, 라이프 스타일, 친구…’

이를 생각해서 홈페이지를 제작해야 합니다. 긱다이브와 이 기법을 이용하여 제작한 예시를 설명해 드리겠습니다.

이렇게 페르소나를 설정하였고 아래는 그 결과입니다. 취업 종합 솔루션 비투와이 입니다.

취준생들이 공감할 수 있는 메시지와 이미지를 넣었고, 자기소개서와 면접 준비 등 실질적으로 도움 되는 콘텐츠들을 배치하였습니다.

‘자기소개서에 적을게 이름밖에 없는데’와 같은 문구는 ‘여기 있는 다른 사람들 또한 나와 크게 처지가 다르지 않구나’라는 느낌을 주어, 좀 더 위안을 줍니다.

이처럼 고객이 누구인지 먼저 정의하는 것이 기획의 첫 단추라고 볼 수 있습니다.

02. 전환을 만드는 요소들



타깃에 대한 분석이 끝났다면, 이제 타깃이 원하는 요소들을 어떻게 배치하여 매력적인 홈페이지로 만들지에 대한 고민이 필요합니다.

생각 정리 클래스

위는 긱다이브와 프로젝트를 함께한 ‘생각 정리 클래스’의 일부입니다. 이 사진에서 어떤 요소들이 전환을 만들까요?

강사 사진

: 밝은 이미지의 프로필을 배치하여 신뢰를 높임.

강의 설명

: 스타 유튜버, CEO, Best 1위와 같이 높은 사회적 가치의 문구를 사용.

할인 가격

: 일시불이 부담스러운 사람들에게 월 24,750원이라는 분할 결제 가격을 표시.

강의의 장점을 부각

: ‘내 생각을 잘 말하는 방법’과 같이 강의를 통해 얻을 수 있는 혜택을 명시.

저희는 어떻게 하면 타깃의 관심을 이끌지 최적화 단계를 진행합니다.

유저들의 예상 경로를 플로우 차트로 만듭니다

우선 유저들이 웹 내에서 어떠한 방향으로 움직이고 활동할 것인지에 대한 예상 도안을 만듭니다. 이 과정에서 좀 더 세부적으로 설문, A/B 테스트 등을 하여 최적의 도안을 도출합니다.

웹 디자인 기획

플로우 차트가 만들어지면 이 후 그것을 바탕으로 전체적인 프레임을 구축합니다. 이 과정에서 아이콘의 위치, 색상, 폰트 등 세심한 부분들의 고민 또한 진행합니다.

이안 지오텍 사례

결과적으로 사람들의 전환을 유도하는 디자인을 도출합니다. 많은 고민과 실행으로 매력적일 수밖에 없는 사이트를 구축합니다.



03. 확장 단계를 고려



만족할 만한 결과물이 나왔다고 끝이 아닙니다. 사업이 확장된다면 리뉴얼과 업데이트는 필수이기 때문입니다.

여러 가지가 있지만 아래의 기능들의 업데이트가 예시입니다.

✅ 결제 시스템 추가

✅ 디바이스에 따른 크기 자동 변환

✅ 다국어 시스템

✅ 추가 보안 강화

✅ 과도한 트래픽 사용을 방지하는 오토 스케일링

다음 단계를 위한 주석 처리 설계

이 과정을 위해 긱다이브는 확장 및 업데이트를 고려하는 주석 처리를 설계해 드리고 있습니다. 업데이트 시 좀 더 쉬운 접근이 가능하죠.

이러한 확장은 직접 코딩하여 개발할 때 가능합니다. 이미지와 텍스트만 넣어서 만드는 템플릿 툴에서는 불가능 합니다. 즉, 템플릿으로 개발할 경우 업데이트가 거의 불가능하다고 볼 수 있습니다.

React와 Node.js 같은 보편적인 기술을 활용해 안정적이고 확장 가능한 웹사이트를 구축합니다. 향후 발생할 수 있는 유지 보수 비용을 절감하고, 변화에도 유연하게 대응할 수 있는 장점이 있습니다.

저희가 지금까지 230여 건의 프로젝트 경험을 통해 어떤 방식으로 홈페이지를 기획&제작하는지에 알아보았습니다.

긴 글 읽어 주셔서 감사합니다.