스타트업을 위한 커뮤니티, 시작점 홈페이지 제작기 회고
주식회사 시작점, 홈페이지 기획부터 제작까지의 모든 것!
오늘은 케르 스튜디오에서 작업했던 '주식회사 시작점' 린브랜딩 및 홈페이지 제작기를 회고해보려 합니다.
회고에 앞서 간단하게 저희가 어떤 프로세스로 홈페이지를 제작하는지부터 알려드리면 회고가 더욱 선명하게 와닿으실 것 같아 설명해드릴게요.
케르의 전체 작업 과정을 타임라인으로 한 눈에 보자면 위와 같아요. 인터뷰를 진행하고, 디자인 방향성을 담은 무드보드를 제공합니다. 홈페이지에 들어갈 내용 기획안을 와이어프레임으로 짜고, 디자인 작업 및 웹 구현 & 피드백을 하는 플로우입니다.
시작점은 이런 케르의 강점을 잘 알아봐주신 감사한 클라이언트입니다. 특히 담당해주시는 매니저님의 일처리가 너무도 완벽에 가깝고, 누구보다도 '시작점'이라는 곳, 그리고 시작점에서 성장하는 사람들에게 진심이라는 것을 알아서 그 마음을 잘 녹여내기 위해 작업을 진행했습니다.
1. 고객 인터뷰 :
이 브랜드는 어떤 곳인지 정의하기
인터뷰는 브랜드 맞춤형 질문으로 진행되며, 본 인터뷰지는 예시입니다.케르는 홈페이지를 제작할 때 클라이언트 인터뷰를 가장 먼저 진행합니다.
클라이언트가 이 비즈니스를 하는 이유, 전하고자 하는 메시지, 보람찼던 순간 등 다양한 이야기를 설문지를 통해 듣고, 그것을 홈페이지에 구현하는 역할을 하고 있습니다. 홈페이지는 브랜드의 얼굴이기 때문에 사람들에게 브랜드의 이야기를 효과적으로 전달하는 게 중요하다고 생각해, 인터뷰는 각 브랜드 맞춤형으로 제작하여 진행하고 있습니다.
브랜드의 얘기를 들으면 방향성이 보입니다. 어떤 브랜드는 손대면 탁 터질 것 같은 통통 튀는 전달이 잘 어울리고, 어떤 브랜드는 눈 내린 산의 밤처럼 고요한 이야기가 필요하기도 하거든요. 그런 스토리는 사실 브랜드 안에 숨어있는데 그것을 이끌어내는 작업을 진행을 함께합니다.
2. 브랜드 전략/ 무드보드 :
로고를 교체하는 것만이 리브랜딩일까?
시작점의 리뉴얼 전 기존 홈페이지'시작점'은 블루포인트 파트너스가 조성한 초기/예비 스타트업 성장 커뮤니티로, 예비 창업자와 초기 스타트업의 경험을 공유하고, 다양한 프로그램과 행사를 통해 성장할 수 있도록 돕는 곳입니다.
창업을 처음 준비하는 젊은 세대가 주요 타깃이었기 때문에 기존 홈페이지를 좀 더 젊은 세대에 맞추어 피봇팅하는 것이 최우선 과제였고, 시작점 구성원들이 창업자 인큐베이팅에 얼마나 진심인지, 어떤 비전을 가지고 일에 임하고 있는지 디테일하게 볼 수 있도록 만드는 게 중요했습니다.
처음 의뢰가 왔을 때 홈페이지를 돌아보니 단순히 디자인을 갈아끼우는 것보다 시작점 멤버들이 전하고자 하는 가치를 스토리로 뽑아 보여주는 게 필요하다는 판단이 들었습니다.
기존 홈페이지도 충분히 멋졌지만, 시작점 커뮤니티가 하고자 하는 일이 홈페이지에서 명확히 보이지 않았기 때문이에요. '예비창업자의 꿈을 실현시키는 공간'이라는 멋진 슬로건이 숨어있고, 중요한 정보를 정돈하여 한 눈에 보여주면 더 멋진 홈페이지가 될 것이라는 확신이 들었습니다.
흔히 리브랜딩이라고 하면 멋진 디자인 작업물들을 떠올리시는 분들이 많을 거예요. 브랜드의 특색을 담아 로고를 바꾸거나, 디자인 무드를 변경하는 작업이요.
그러나, 저희가 생각했던 시작점의 브랜딩은 좀 더 총체적인 이야기였습니다. 홈페이지만 봐도 뭐 하는 곳인지 명확하게 알도록 바꾸고 스토리를 전하는 게 더 오래갈 수 있는 브랜딩이라고 생각했어요.
그래서 저희는 시작점의 타겟을 명확히 마음에 새기고, 레퍼런스를 찾아 무드보드를 기획했습니다. 벤처 캐피탈의 신뢰감은 유지하되, 토스처럼 젊고 혁신적인 분위기를 담아내고 싶었습니다.
3. 와이어프레임 제작:
마케팅 포인트를 담아 기획하기
요청사항을 참고해 만든 페이지 구조. 홈페이지에 필요한 내용을 묶어 정리하고, 글로 풀어냅니다.저희는 클라이언트에게 와이어 프레임(기획안)을 요청하지 않습니다.
저희가 기획의 전문가이기 때문에, 브랜드의 스토리를 잘 살린 기획안을 만들고 있거든요. 인터뷰지 및 시장조사를 통해 동종업계 홈페이지를 살피고, 클라이언트에게 딱 맞는 홈페이지 와이어 프레임(스토리보드 기획안)을 기획하여 전달하고 피드백을 받습니다.
기존 홈페이지에서 너무 많은 정보를 담아서 한 눈에 와닿지 않았던 정보들을 잘 묶어서 정돈하고, 처음 본 사람도 이 곳이 뭐하는 곳인지 느낄 수 있도록 대제목과 멘트를 통해 보여주는 와이어프레임을 기획했습니다.
앞서 말씀드렸던 시작점 매니저님과의 시너지가 더욱 폭발하는 영역이기도 했어요. 필요하면 계속 전화를 통해 어떤 서비스인지 설명을 듣고, 이해하는 시간을 가지기도 했습니다.
4. 디자인으로 시각화 하기:
브랜드의 특별함을 더해주는 에셋 제작
매니저님과 함께 내용을 정비하고, 페이지를 다듬고 나서는 디자인 작업에 착수했습니다. 시작점은 모든 에셋과 아이콘을 케르 디자이너 고요가 직접 그려 작업했습니다.
신뢰도를 높이면서도, 브랜드의 이미지를 한 눈에 알게끔 만들고자 하는 욕심이 있었거든요. 시작점 내부 구성원분들이 진심으로 스타트업의 성장을 돕고 싶어한다는 걸 홈페이지만 봐도 한 눈에 알게 만들고 싶었습니다.
수없이 그려낸 디자인 시안
고요가 그려낸 피그마에 그려낸 디자인 시안만 해도 몇 벌이 되는지 모릅니다. 각 페이지마다 완벽한 레이아웃을 구상하기 위해 수없이 많은 시안을 디자인했습니다. 일러스트도 시작점의 무드에 맞추기 위해 전부 그리는 수고로운 과정을 거쳤습니다.
5. 웹구현 & 클라이언트 전달:
브랜드 전략에 딱 맞는 코드 구현
시작점의 메인조이는 그것을 완벽하게 구현하기 위해 적합한 코드를 찾아서 수정하고, 다시 짜는 과정을 반복했어요. 고요의 디자인을 그대로 구현해내는 짜릿한 쾌감! 이루말할 수 없었습니다.
그렇게 케르와 함께 다시 해석된 시작점의 홈페이지. 메인에 우리들의 이야기가 시작되는 공간이라는 메시지와 함께 세상을 향해 서있는 사람의 뒷모습으로 메시지를 전달하고, 젊고 밝으면서도 신뢰도 높은 일러스트로 무드를 구현해냈습니다.
시작점 메인 한 눈에 보기
시작점을 소개하는 어바웃 페이지
어바웃 한 눈에 보기시작이라는 이미지를 제대로 소구하기 위해 각종 코드를 화려하게 활용하여 젊은 감성을 더하고, 모바일 최적화 작업까지 마무리했습니다. 모바일 유저가 많다고 하셨기 때문에 최적화도 아주 높은 순위의 고려 사항이었어요.
그리고 무엇보다 노코드 툴 아임웹으로 홈페이지를 제작하는 이유는 업무가 종결되어도 클라이언트가 편하게 수정할 수 있도록 하기 위함이어서 전반적으로 어떻게 수정해야하는지에 대한 아임웹 가이드를 전달드리며 업무를 종결했습니다.
6. 피드백 & 회고:
다음 클라이언트를 위한 준비
시작점의 홈페이지 제작을 마치고 담당해주셨던 매니저님께 만족도 조사를 진행했는데, 사전에 저희 브런치를 읽어보시고 저희가 반짝반짝 빛나는 사람들 같아 함께 일하고 싶었고, 함께 일해서 좋았다고 말씀해주셨습니다. 그 말씀에 정말로 큰 감동을 받았어요.
우리가 하는 일이 단순히 '일'이라서가 아니라, 세상을 더 좋게 만드는 일이었으면 좋겠다는 생각을 하며 살았는데 마치 잘하고 있다는 대답을 들은 것만 같은 날이었습니다. 클라이언트의 성공을 함께 하는 케르가 되고 싶으니까요.
앞으로도 주식회사 시작점과 블루포인트의 무한한 성장을 기원합니다!
대전에 위치한 스타트업이거나, 혹은 스타트업을 운영하며 도움이 필요한 분들, 커뮤니티에서 따뜻한 환대와 위로를 얻고 싶은 창업자 여러분, 언제든 시작점을 찾아주세요!
startingpoint.co.kr
* 본 포트폴리오는 2023년 1월 케르가 작업한 '주식회사 시작점' 린브랜딩 및 홈페이지 제작 업무를 기반으로 작성되었습니다.
