brunch

매거진 뒤늦은 직장인의 스타트업 삽질

라이킷 7 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 쿠우보이 Apr 18. 2017

랜딩페이지 제작

React로 Landing Page Website 제작

물건을 팔려면 일단 고객의 니즈를 파악해야 한다-고 들었다.

그리 신선하지 않은 말이지만 실천이 중요했다.

무엇보다 아무도 사지 않을 제품과 서비스를 열심히 만들지 말아야 했다.

그래서 본격적인 제품 개발에 들어가기 전, 고객들을 만나기로 했다.

그러면 고객을 만나서 고객의 불편함을 듣고 그들의 이야기를 들어야 했다.

마지막으로 앞으로 개발할 제품에 대해 소개하고 나의 연락처(명함)를 남겨야 한다.

그렇다면 다음과 같은 아이템의 준비가 필요했다.

1. 명함

2. 명함에 있는 이메일 주소

3. 명함에 있는 핸드폰 번호

4. 명함에 있는 홈페이지 (Landing Page)

2,3번은 다행히 있고, 명함과 홈페이지가 필요했다. (메일 계정은 google suite을 이용해서 개인 이메일 사용을 피했다.)

이런 사업에 필요한 일들을 하는 것은 사업이 아니고, 사업 놀이에 불과할 수 있으므로 최대한 여기서 시간 낭비하지 말고 빨리 이 언덕을 넘어가야 했다.

서둘러 빨리 할 수 있는 것부터 준비했다...라고 말해놓고 명함 만드는데 일주일이나 소비했다.

언제나 말처럼 쉬운 건 이 세상에 한 개도 없다.

대기업에 입사했을 땐, 사업지원팀에서 필요한 정보만 확인해 가더니 입사 한 달 만에 명함이 나왔었다.

조그만 외국계 기업에 이직했을 땐, 영업지원 매니저님께서 엑셀 파일을 보내주더니 필요한 정보를 기입해서 보내라고 해서 엑셀 파일에 정보를 넣어서 보냈었다.

그런데 내 사업을 하려니 사업지원팀도 없고, 영업지원 매니저님도 없다.

여기엔 나 혼자...

그래도 명함은 뭐 쉽겠거니 생각하고 파워포인트로 명함을 제작했다.

가장 싸게 해주는 온라인 명함 업체를 찾아내서 파워포인트 파일을 보냈다.

전화가 오더니 어려운 말을 하시면서 이미지로 보내야 한다고 하셨다.

그래서 이미지 jpg, png 두 가지 파일 포맷으로 변환해서 보냈다.

또 전화가 왔다.

RGB에서 CMYK로 변환해서 보내야 한다고 말씀하신다. 그러지 않으면 화면에서 보이는 것과 실제 프린트된 색이 다를 거라 말씀하셨다.

내가 이런 것을 알 턱이 있나...

포토샵도 없고 포토샵을 쓸 줄도 모르니, 굉장히 힘이 빠졌다. 기존 이미지를 CMYK로 변환해 주는 웹사이트를 찾아 다시 수정해봤지만, 명함 업체에서 다시 전화를 받고 쓴소리를 들었다. ㅜㅜ

다음 날, 나는 다시 마음을 다잡고, illustrator trial version을 받아 그냥 illustrator를 직접 배우기로 했다. 다행히 우리에겐 youtube 가 있기에 일러스트레이터의 기본 중의 기본만 배우고 다시 작업을 했다.

어설프지만 나름...

어설퍼 보이지만, 나름 text logo부터 google font 까지 적용하기엔 짧지 않은 시간이 걸렸다. 아는 동생이 도와주기도 했다. 고마워 HG...

종이 재질은 가장 싼 것을 고르고 주문을 눌렀다. 이제 명함이 오겠지...

3일 뒤 받은 명함의 종이 퀄리티는 전자제품 택배와 같이 오는 제품 박스 종이 퀄리티와 비슷했다.

최악이었다.

하지만 명함에 더 시간을 허비할 순 없었다. 그냥 pass 하기로.

이제는 웹사이트다!

명함이 준비되었으니 이제 랜딩페이지를 만들 차례다. 나름 React.js를 배웠고, 이후 Redux를 공부할 겸 적용해보려 Redux를 이틀 공부했다. 생각보다 빨리 이해가 되지 않았다.

됐다, 일단 Redux는 pass 하고 할 줄 아는 React부터 해 보자!

최대한 빨리 할 수 있는 것부터 해 나가야겠다. 제품만 lean development 방법론을 적용하는 게 아니라 모든 스텝에 적용해야 했다. React Code 가 중요한 게 아니라 일단 내가 구매한 도메인에 한 문장이라도 올라가도록 만들어 놔야 했다. 명함을 건네주고 고객이 홈페이지에 들어가 봤는데 404 not found 가 뜨면 너무 창피하지 않은가.

그동안 아마존 웹서비스(aws)에서는 EC2(Elastic Compute Cloud)만 써 왔다. 기존에 개발을 linux ubuntu 환경에서 배워서 그런지 ubuntu 14.04 EC2 경에서 server 나 client web code를 만드는 것은 생각보다 익숙했다. 그런데 EC2의 단점은 landing page 에 server code 가 굳이 필요한 것도 아닌데 상시 24/365 켜 놓아야 한다는 것이다. EC2를 켜 놓으면, 켜진 시간으로 AWS에선 과금을 한다. 그래서 지난달 아무것도 하지 않았는데 6불을 냈다. 6불이면 대략 7천 원이고 7천 원이면 버거킹에서 무려 콰트로 치즈 와퍼세트를 먹을 수 있다.

인터넷을 찾아보니 이럴 경우 S3(Simple Storage Service)를 사용하면 된다고 했다. S3는 보통 파일이나 이미지와 같은 object를 저장해놓는 저장소 개념인데, landing page의 경우 특성상 동적으로 변화되는 코드가 아니기 때문이다.

그래서 난 S3에 landing page를 올리는 게 되게 쉬울 줄 알았다.

사실 지나고 보니 되게 쉬운 게 맞다. 나같이 삽질러가 아닌 이상 나 같은 삽질을 할 리가 없다. 그러나 난 단 한 번도 삽질 없이 지나가 본 적이 없는지라, 이번엔 S3과 구매한 domain과의 연결에 3일을 고생했다.

같이 부트캠프를 수강했던 친구가 그냥 하던 대로 EC2에 올리라고 했다. 그렇지만 난 마음속으로 이것도 못하면 사업은 무슨 사업이냐!라는 고집이 있었다. 사실 명함 잘 안될 때부터 이 맘으로 밀어붙이고 있다. 난 아직 사업에 발도 들여보지 못했는데 모든 자잘한 스텝에 좌절해서 누군가에게 돈 주고 맡겨버리면 당장은 그냥 지나갈 수 있겠지만, 내게 자신이 남지 않는다고 생각했다.

부트캠프 수강생 친구와 함께 이래 저래 계속 삽질해가며 결국 어제 기본적인 text 한 문장을 띄우게 되었다. 그리고 오늘은 집에 와서 create-react-app이라고 하는 기본적인 react 시작 환경 코드를 드디어 내가 구매한 도메인 주소로 인터넷에 띄울 수 있게 되었다.

드디어 올라갔다. ㅜㅜ

워드프레스나 wix를 사용하면 좀 더 쉽고 빠르게 올릴 수 있었을 것이다. 하지만 약간의 고집을 부려 일주일이나 걸려 랜딩페이지를 만들게 되었다. 이젠 기존에 local 에 만들어 놓았던 랜딩페이지 콘텐츠와 bootstrat/css 등을 통해 간단하게 디자인하는 법을 배워봐야겠다. 특별한 기능은 필요 없으므로 클릭했을 때 화면 이동이나 page routing만 가능토록 할 예정이다.

고생은 사서 한다는데 확실히 빨리 끝낼 수 있을 땐 빨리 끝내는 게 좋은 것 같다. 하지만 개고생을 하더라도 반드시 배우는 게 있어야겠다.

keyword