자사 홈페이지 및 쇼핑몰 제작은 어떻게 이루어지는가
요즘에는 브랜드 홈페이지 제작과 동시에 쇼핑몰을 함께 구현하는 의뢰가 많아졌습니다. 아무래도 자사 쇼핑몰을 구축하게 되면 다른 곳에 입점했을 때 발생하는 수수료를 내지 않아도 되는 장점이 있고요, 고객과 직접 소통할 수 있기 때문이겠죠.
그리고 브랜드 홈페이지 만드는 것만으로도 비용이 적지 않은데, 추후에 쇼핑몰을 추가적으로 하는 것보다는 (필요하다면) 홈페이지 제작 시 쇼핑몰 제작을 함께 하는 것이 효율적입니다.
개요
현재 "스마트 스피커(가칭)"라는 스피커 브랜드가 있고, 제품을 제작하고 있는 상황이라고 가정해보겠습니다. 곧 제품이 생산되면 홈페이지 및 쇼핑몰을 제작해서 그곳에서 제품을 판매할 계획입니다. 제작 경험이 전무한 상황에서 필요한 것들을 하나씩 설명드릴게요.
쇼핑몰 구축 과정
먼저 홈페이지 및 쇼핑몰 구축 과정에 대해 설명해드릴게요. 크게 6단계로 나눠질 수 있을 것 같네요.
1. 도메인 구매
2. 호스팅 or 쇼핑몰 솔루션
3. UI 기획
4. GUI 디자인
5. 퍼블리싱 및 개발
6. 홈페이지 및 쇼핑몰 제작 완료
1. 도메인 구매
가장 먼저 도메인이라는 것을 구매해야 합니다. 도메인과 URL은 같은 말이고요. www로 시작되는 온라인상의 주소를 말합니다.
오프라인에도 '서울시 서초구... '처럼 찾아갈 주소가 있듯이 온라인 공간에 나의 상점을 찾아올 수 있는 주소를 사는 개념입니다. 온라인에는 오프라인처럼 공간의 제약은 없지만, 오프라인 상점은 지나가다 들를 수도 있는 반면 온라인 상점은 지나가다 들를 수 없기 때문에 도메인을 어떻게 정하는지도 굉장히 중요합니다.
1.1 좋은 도메인 선정하기
A. 나의 브랜드 네임과 동일한 도메인
가장 선호하는 방향입니다. [www.smartspeaker.com]처럼 나의 브랜드명으로 된 도메인을 갖고 있다면 가장 명확하겠죠. 하지만 워낙 많은 도메인들이 이미 등록이 되어있습니다. 심지어 쓰지도 않으면서 추후에 누군가에 팔기 위해서 소유하고 있다가 그것만 파는 업체들도 있습니다. 좋은 도메인을 갖기 위해서는 브랜드 네이밍을 할 때 도메인이 사용 가능한지 검토해보고 결정해야 합니다.
B. 브랜드 명을 포함하지만 다른 도메인
A이 실패할 경우에 생각해봐야 할 옵션입니다. smartspeaker라는 이름이 너무 흔해서 남아있는 도메인이 없다면 [www.smartspeakercompany.com]처럼 뒤에 다른 단어를 붙이거나, [www.sspeaker.com]처럼 축약을 하거나, [www.smartspeaker12.com]처럼 의미 있는 숫자를 붙이거나 하는 방법이 있습니다.
C. 브랜드명은 아니지만 브랜드 이미지나 대표 상품이 떠오르는 도메인
B 방향도 어렵다면, 브랜드 이미지가 대표 상품이 떠로는 도메인이 필요할 것 같습니다. www.forear.com(귀를 위한) 이런 식인 것이죠. 하지만, 너무 브랜드 네이밍과 멀어지는 것은 위험 요소가 존재합니다.
D. 다른 브랜드와 헷갈리지 않는 도메인
나의 도메인이 다른 브랜드를 연상시키거나, 다른 브랜드 이름과 비슷한 도메인을 갖게 된다면 고객이 잘못 방문하게 되는 문제가 발생하겠죠?
E. com / co.kr / kr / net
가장 선호하는 것은 .com(닷컴)이긴 합니다. 하지만 이 역시 없다면 .co.kr / .kr 등 도 요즘에는 많이 사용합니다. .kr같은 경우는 한국이라는 이미지를 도메인에 포함하고 짧기 때문에 기억하기에는 좋을 수 있으나. 저 같은 경우는 기억이 잘 나지 않을 때는 co.kr을 먼저 쳐보는 것 같네요. 큰 기업의 서비스의 경우는 .com / .co.kr / .kr / net 같은 것을 모두 구매하기도 합니다.
ex) 인터파크는 interpark.com으로 쇼핑몰 운영을 하다가 추후에 다른 회사에서 interpark.co.kr를 활용해서 다른 내용으로 영업을 하는 것을 발견하고 소송을 제기해 해당 도메인을 확보한 사례도 있습니다.
1.2 도메인 구매하기
국내에는 후이즈, 가비아, 닷네임 등 도메인을 구매할 수 있는 다양한 업체들이 있습니다. 사이트를 방문하면 구매 가능한 도메인이 무엇이 있는지 검색해볼 수 있습니다.
첫 페이지에 중간쯤에 보시면 '원하는 도메인을 입력하세요'라는 창이 있습니다. 이쪽에 smartspeaker를 검색해볼까요.
위에서 말했듯이 보통 .com(닷컴)을 선호하시지만, 없는 경우가 많습니다. co.kr 이 맘에 든다면 그것으로, 아니라면 위에 5가지 기준에 부합되는 도메인을 검색해서 구매합니다.
원하는 도메인을 찾으셨다면 하루빨리 구매하시길 추천드립니다. (저희 클라이언트 중에는 미리 도메인을 정하고 구매하려고 했다가 조금 늦어졌던 경우가 있었습니다. 몇 주 뒤 실제 구매를 하려고 다시 검색해보니 이미 누군가 그 도메인을 사버렸고, 혹시나 해서 구매 문의를 해보았더니 400만 원을 요구하기도 했습니다. 누군가 검색했다는 데이터를 수집해서 미리 사두는 일도 있습니다. 비용이 많은 편은 아니니 쓸 것 같다고 하면 도메인은 가급적 빨리 구매하시길 추천드립니다. .com, co.kr 등 일반적인 주소는 1년에 20000원 내외입니다.
2. 호스팅 or 쇼핑몰 솔루션
호스팅이 무엇이고 쇼핑몰 솔루션이 무엇인지 잘 모르시겠다고요?
호스팅은 온라인에 집을 지을 수 있는 땅? 정도라고 생각하시면 될 것 같습니다. 우리가 상점을 열기 위해서는 건물이 있어야 하고 그 건물을 짓기 위해서는 땅이 있어야 하죠? 호스팅은 그 땅의 개념입니다. 온라인상의 땅을 사고 도메인(주소)을 붙여두면 그 주소를 쳤을 때 저희 땅으로 오게 되는 거죠.
그 땅 위에는 건물을 지을 수 있는데요. 쇼핑몰 솔루션이라는 것은 그 건물을 짓기 위한 뼈대가 구축되어 있는 상태인 것입니다. 물론 처음 바닥 공사부터 뼈대를 잡고 하는 과정을 모두 거쳐서 쇼핑몰을 구축할 수도 있지만, 그렇게 되면 비용과 시간이 많아지게 됩니다. 그래서 쇼핑몰 솔루션이라는 뼈대를 세워두고 그 외관 공사만 진행해서 쇼핑몰을 제작할 수 있습니다.
솔루션의 종류도 역시 다양합니다. 카페 24, 메이크샵, 퍼스트몰, 아임 웹, 고도몰 등등 너무나도 다양하기 때문에 비교해보고 가장 활용이 용이한 쪽으로 선정해야 합니다.
그 솔루션을이라는 뼈대가 있는 상황에서 전체적인 사이트를 기획하고, 디자인하고, 퍼블리싱 및 개발을 진행해서 세상에 둘도 없는 브랜드만의 고유한 홈페이지 및 쇼핑몰을 제작하는 것이죠.
3. UI 기획
UI라는 것은 User Interface의 줄임말로 보통 화면을 설계한다고도 표현합니다. 홈페이지가 다 비슷비슷해 보이더라도 브랜드마다 더 중점을 두는 페이지 혹은 상품들이 있게 마련입니다. 그것들을 고객들이 쉽게 접근할 수 있도록 하고, 홈페이지를 경험하는 과정 속에서 브랜드의 정체성이 드러나게 되기 때문에 UI 기획은 필수적입니다. 이 과정에서 UX(User Experience)를 고려해야 합니다.
UI 기획은 오프라인 상점의 공간 기획이랑 동일합니다. 상점을 방문하더라도 입구에 들어서고 나면 어떤 제품을 가장 먼저 보여주고, 고객 동선을 한쪽으로 유도해서 다른 상품을 편안하면서도 구매욕이 자극되도록 보여주겠다는 의도 하에 공간을 기획하게 되죠. 온라인 공간에서도 동일합니다.
3.1. 사이트맵
먼저 홈페이지 내에 어떤 정보를 넣을 건지 정리해야 합니다.
위 이미지처럼 들어가야 할 내용들을 정리합니다. 제품 정보, 기업소개, CEO 인사말, 제품 구매, Q&A, FAQ 등 다양한 요소들이 많습니다. 쇼핑몰을 처음 제작하는 상황이라면, 동종업계 경쟁사를 참고하는 방법이 속도를 더해줄 것입니다. 물론 경쟁사의 사이트맵을 동일하게 벤치마킹하는 것도 방법이겠지만, 동일하게 세팅한 후에 우리 브랜드만의 장점을 분석해서 조절해야 단계가 필요하겠죠.
3.2. 와이어프레임(Wireframe) & 시나리오(Scenario) 기획
다음은 와이어프레임(wireframe)이라는 것을 기획해야 합니다. 각 페이지에 세부적으로 어떤 내용이 어떤 위치 혹은 어떤 형태로 들어갈지 구조를 짜는 것입니다. 이 상황에서는 디자인 스타일에 대해서는 무시하고요. 절대적으로 내용적인 측면에서 접근해야 합니다. 디자인이 어떻게 될지 이 상황에서 정하고 들어가게 되면 추후에 디자인을 만들어가는 상황에서 크레이티브를 발휘하게 어려울 수 있습니다.
그리고 시나리오(Scenario)를 짜 봐야 합니다. 어떤 페이지에서 어떤 버튼을 눌러서 어디로 이동하게 할 것인가, 어떤 이미지를 통해서 어떻게 이동하게 할 것인가 하는 시나리오입니다. 말 그대로 고객이 어떻게 움직이게 될지 극본인 것이죠. 오프라인 상점에서 동선을 짜보는 것과 동일합니다.
특히 쇼핑몰이라면 제품을 구매할 수 있는 곳까지 갈 수 있는 동선에서 어려움이 발생하면 바로 이탈할 수 있기 때문에 단계를 최소화하면서 자연스럽게 이어질 수 있도록 짜는 것이 중요합니다.
4. GUI 디자인
기획을 통해서 홈페이지를 어떻게 구축할지 머릿속에 그려졌다면 이제는 외관입니다. 디자인은 브랜드의 이미지나 정체성을 느끼게 할 수 있는 중요한 요소입니다. 그렇기 때문에 브랜드 아이덴티티가 잘 잡혀 있는가? 그 브랜드 아이덴티티를 어떻게 웹&모바일에서 느껴지도록 표현할 수 있는가가 관건입니다.
4.1. 무드 보드(Moodboard) 제작
먼저 무드 보드를 제작합니다. 무드 보드라는 것은 단어 그대로 분위기를 알 수 있는 보드입니다. 위 참고 이미지처럼 원하는 콘셉트의 분위기가 느껴질 수 있는 다양한 이미지들을 취합합니다. 그래서 몇 가지 디자인 방향성을 추려냅니다.
위 이미지는 실제로 작업했던 비전홀딩스 CI 리뉴얼 프로젝트에서 웹사이트를 제작하기 전에 제안했던 무드 보드입니다.
실제로 웹사이트의 화면에 대한 시안을 보여주는 것이 아니고 전체적인 사이트가 어떤 분위기가 될지 상상할 수 있는 이미지로 구성됩니다.
4.2. 주요 페이지 GUI 디자인
방향성이 결정되면 그 방향성 안에서 다양한 GUI 디자인 시안을 제작합니다. 여기서는 메인 페이지를 포함하여 가장 주요한 2~3페이지 정도 설정하고 시안 작업에 돌입합니다. UI 기획 시 나온 내용들과 무드 보드를 통한 방향성을 정리한 상황이기에 만족할 수 있는 확률은 많이 높아진 상황입니다.
메인 페이지, 주요 페이지 디자인으로 어느 정도 디자인 방향이 확고히 잡히게 되면 나머지 세부 페이지를 디자인하는 단계로 진입합니다.
5. 퍼블리싱 및 개발
이제 디자인이 웹상에 실제로 보이게 하는 단계입니다. 보통 퍼블리싱이라고 하면 책을 출판할 때 사용하는 단어이지만 웹 퍼블리싱은 디자인된 파일을 웹상의 공간이 보이게 하는 작업이라고 보시면 됩니다. 인테리어 시안 이미지를 실제 공간에 시공하는 단계와 비슷하다고 보시면 됩니다.
보통 쇼핑몰 솔루션은 퍼블리셔라는 직종에서 소화할 수 있긴 합니다. 하지만, 브랜드만의 추가적인 기능이 필요하다고 하면 퍼블리싱만으로는 구현이 어려울 수가 있습니다.
그럴 때 프런트엔드, 백엔드 개발자가 필요한데요. 명칭이 어렵죠? 어떤 직종인지 간략하게 설명드릴게요.
5.1. 퍼블리셔 (Web Publisher)
디자인을 웹상에서 보일 수 있는 부분을 담당하며 보통 기능적인 부분보다는 시각적인 부분에 초점이 맞춰져 있습니다.
- 사용언어 : HTML, CSS
5.2. 프런트엔드 개발자 (Front-end Developer)
시각적이 부분보다는 기능적인 부분에 초점을 맞추어서 보이지 않는 기능들도 구현을 합니다.
- 사용언어 : HTML, CSS, JavaScript, JQuery
HTML(HyperText Markup Language) : 웹 페이지에서의 가장 기초적인 틀을 구성하는 언어
CSS : HTML에 만든 틀에 디자인 및 스타일을 관리하는 언어
JavaScript : 단순하게 보여주는 것이 아닌 2D, 3D 그래픽이나 동영상, 지도와 같이 능동적인 것들을 보여줄 수 있는 언어
JQuery : JavaScript를 보다 쉽게 사용할 수 있도록 만들어진 라이브러리
5.3. 백엔드 개발자 (Back-end Developer)
퍼블리셔와 프런트엔드 개발자는 사용자가 직접적으로 경험하는 영역을 개발한다고 하면 백엔드 개발자는 눈에 보이지 않는 서버나 DB의 개발까지 진행합니다.
- 사용언어 : java, C#, .NET 등
5.4. 풀스택 개발자 (Full Stack Developer)
프런트엔드, 백엔드의 영역 모두를 아우르는 직종으로 한 가지 파트에 국한되지 않고 프로젝트 전반을 모두 다를 수 있습니다. 물론 일당백으로 모두 해낼 수 있겠지만 그만큼 정말 잘하는 사람을 찾기는 쉽지 않습니다. 풀 스택이라고 해도 다 같은 풀스택은 아니고요.
6. 홈페이지 및 쇼핑몰 제작 완료
사이트가 오픈되면, 고객이 겪을 수 있는 다양한 상황들을 테스트하게 됩니다. 제품을 구매하게 된다던지, 회사 소개를 찾아본다던지, 질문을 남긴다던지 하는 모든 상황들을 테스트하면서 1~2주 정도 테스트 기간을 거친 후에 위에서 구매한 도메인을 연결하게 됩니다.
이후에는 마케팅을 통해서 쇼핑몰로 유입되게 만들고, 그것으로 판매가 일어나면 제품 발송과 A/S 및 CS 단계를 거치게 됩니다.
어떠신가요? 사실 위의 단계 내부에서 조금 더 세부적인 과정이 있지만, 전체적인 그림을 그릴 수 있도록 큰 틀에 대해 말씀드렸습니다. 아무래도 이 모든 과정을 스스로 한다는 것은 어려울 것이고요. 보통 1~2단계 (1. 도메인 구매 / 2. 호스팅 or 쇼핑몰 솔루션)는 자체적으로 하실 수 있겠지만,
3~6단계(3. UI 기획 / 4. GUI 디자인 / 5. 퍼블리싱 및 개발 / 6. 홈페이지 및 쇼핑몰 제작 완료)는 전문 홈페이지 및 쇼핑몰 제작 스튜디오에 의뢰를 하는 것이 효율적입니다.
홈페이지 제작사례 보러가기
쌍방울 http://www.lllayer.com/portfolio/22
브리지스톤골프 http://www.lllayer.com/portfolio/16
비전 홀딩스 코퍼레이션 http://www.lllayer.com/portfolio/23
엔터테인먼트 뮤직카로마 : http://www.lllayer.com/portfolio/25
오텍그룹사 & 오텍 : http://www.lllayer.com/portfolio/11
