Wookang makes AI

내가 언제나 갖고 싶었던 것

함께 웃고

함께 슬퍼하는

팀

한때 내가 가졌던 것,

그리고 가장 그리워 하는 것,

정말 함께 하는 팀

서로가 인정하고 정말 해내길 바라는 팀

나의 꿈은 그것인것도 같다

오늘, 그러니까 1월 2일, 이 소중한 날 하루 전체를 날려버렸다.

어제 새벽 5시 55분까지 고생하다 끝내 해결못하고 잠들었는데

보통은 그 다음날 일어나자마자 해결되기에 걱정이 없었는데

저녁 8시가 되어서야 해결할 수 있었다.

문제는 신년을 맞아 여러 라이브러리들을 업데이트하다

(아마도) mongoose 버전을 6에서 8로 업데이트 했더니

다른 것들은 문제가 없는데 꼭 new Flower(스키마)를 한 후

save()만 하면 저장이 되지 않고 멈춘다는 것이었다.

가장 힘들었던 것은 try catch에 잡히지 않고 그냥 freezing부분이었다.

별짓을 다하며 알아낸 것은

1. 기존 documents를 수정하는 건 문제 없이 저장되나 새로 만들때만 안된다는 것과

2. 버전 6에서 7로만 넘어가도 같은 문제가 생긴다는 것과 6으로 돌아오면 아무 문제없다는 것.

3. 적어도 mongoose.connect(url, options)에서 options설정과는 상관없다는 거였다.

하지만 아무리 integraion문서를 읽어봐도 문제가 될것이 없었다. 

그러다 8시가 다 되어서 혹시나 하는 마음에 mongoose-sequence 라이브러리를 주석처리하고 돌려보니

갑자기 문제없이 돌아갔다.

아.. 그렇다면,

mongoose-sequence도 최신버전으로 업데이트한 후 주석풀고 다시 해보니

잘 된다.

너무 허탈해 머리가 띵했다.

그제서야 배가 고팠다. 그러고보니 저녁 8시까지 아무것도 먹지 않았구나.

다시 실서버 라이브러리까지 모두 업데이트하고 테스트까지 마무리 짓고 식사를 했다.

눙물이 났다.

별것도 아닌것에 너무나 많은 에너지를 털렸다.

용기가 생기지 않는다.

어떤 결과을 마주해도 대책이 없기 때문이다.

광고를 통해 나온 가설의 결과가 내 서비스의 쓸데없음을 입증한다해도

나는 그것에 동의하지 못할 것이다.

가설의 부족을 지적할 것이며 표본의 부족을 지적할 것이다.

무엇보다 서비스를 보완하면 달라질 것이라 말할 것이다 - 지금 내가 할 수 있는 유일한 것이니까

그럼에도 광고를 먼저 돌려보는 것이 이성적으로 맞다는 건 알고 있다.

서비스를 완성한 후 광고를 돌리면

이제는 무조건 잘돼야한다는 압박감으로 전신이 마비되고 뇌는 좌뇌와 우뇌가 번갈아 진동해될테니 말이다.

하염없는 기다림.

방문과 동시에 나가버리는 고객들.

아무리 거절당해도 익숙해지지 않는 이 거절의 감각.

그렇기에 먼저 광고를 돌리는 것이 마땅하다.

그 결과가 엉망을 가리킨다해도 결국 나는 서비스를 완성시키겠지만

내 멘탈을 위해서라도

그래 광고를 먼저 돌리는 것이 맞을 것이다.

'유난한 도전'이라는 토스팀의 (홍보)책을 읽으며 많은 생각을 했다.

n십년간 지옥의 인사동에 죽치고 있는 나에게 이 책은,

알고 싶은 것에는 답하지 않고 듣고 싶지 않은 것(배아파)에는 길게 답해주는

얄궂은 책임이 분명하지만

이렇게

그렇지, 먼저 광고를 해야지. 고객의 니즈는 생각도 안하고 또 개발을 먼저해버렸네 같은 '반성'과

근데 저들이 이전에 만들고 실패했던 서비스 중 하나와 지금 내가 만들고 있는 Moonlit이 꽤나 비슷하구나

같은 슬픈 정보ㅜ

실패를 예감케하는 선각자의 조언

이번에도 안되겠구나 하는 체념이 몸에 스며드는 걸 느꼈다.

너무 실패를 오랫동안 하다보니 이게 몸에 익어버린 것이다.

미리 안될거라고 생각하고 실패하면 맞을 때 덜 아프다보니 본능적으로 그런 신호를 찾아낸 것이다.

그런데 이번것도 안되면 이제 나는 무얼 만드나. 

책만으론 도저히 감이 오지 않아 유튜브에서 토스를 찾아봤더니 본인인증 모듈사업에 관해 토스에서 직접 찍은 다큐가 있었다.

- 책보다 훨씬 좋았다. 북한선전 책자가 아니었다. 강원도에서 만든 강원도 가이드북 느낌이 아니었다. 여기엔 토스가 보였다.

가장 인상깊었던 건 회의 중 나온 이승건 대표의 '부러뜨린다'는 표현이었다.

맞다. 가설만으로는 부러뜨려지지 않는다. 그래서 끝까지 해보는 것이다.

내가 할 수 있는 것들, 내가 핑계될 수 있는 것들은 모두 시도 해보고 실패해야

나는 그것이 부러뜨려졌음을 느낀다.

부러뜨려지지 않은 것들은 미련이 남는다. 그것은 실패가 아니라 포기가 된다.

그렇기에 

광고를 먼저 해야한다는 것은 맞는 말이고 - 할 것이지만

그것의 결과가 어떻든 나는 끝까지 완성하고 정식 서비스를 돌리고

죽을 둥 살둥 아둥바둥 몸부림칠 것이다.

그리고 부러뜨릴 것이다.

부러뜨리고 나면 나는 내게 조금 더 가까워진다.

지금까지는 매번 죽고 싶었다. 하지만 항상 다음 기회에 대한 들뜸이 더 컸다.

다음번에는 될지도 모르잖아. 이런 같잖은 상상.

같잖다는 걸 알면서도 뒤질수가 없었다. 정말 모르는 건 맞으니까, 궁금했다.

이번에는 부러져도 그냥 버리지 않고 여기에 살을 붙일 거다.

게임도 넣고 그럴거다. - '메뉴를 늘리지 마라' - 모두가 하지말라하는 그 악성 표본이 될 거다.

첫째 이유는 내가 할 수 있는게 이것 뿐이며

둘째 이유는 지금 만들고 있는 이 세계가 내 마음에 들기 때문이다. 모두가 싫어해도 난 그 세계 안에 들어가 살거다.

셋째 이유는 어차피 망한거라면 여기에 게임을 붙이는게 처음부터 만드는 것보다 비용도 덜 든다.

좋다.

부러뜨리러 가자.

1. 유저가 결제 버튼을 누르면
2. 사전 검증을 위해 상품의 가격을 포트원에 알려준다
- ajx로 내 서버에 간 후 포트원으로 request를 2번 날린다
- 첫번째를 날려 token을 받고
- 두번째로 위 token과 함께 merchant_uid (서버에서 직접 생성한 주문 id), 가격을 함께 날려준다.
- order DB의 콜렉션을 새로 만들고 위에서 만든 merchant_uid를 저장한다.
- merchant_uid 를 클라로 리턴한다.

3. 다시 클라로 돌아온 후 IMP.request_pay()를 날린다.

        this.IMP.request_pay({

           // pg에는 포트원 > 결제연동에서 PG상점아이디 (사이트코드)를 넣어주면 된다

           // pg             : 'html5_inicis',

           // pg             : 'INIBillTst',// 정기 결제 KG이니시스. 이건 카드입력창이 뜬다

           // pg             : '9810030929',// 다날. 

           // pg             : 'nice.iamport00m',// 나이스 페이먼츠

           // pg             : 'T0000',// NHN KCP

           pg             : 'INIpayTest',// 일반 결제 KG이니시스

           pay_method,

           merchant_uid,

           name           : storeItem.name,

           amount         : storeItem.price.point,

           buyer_email    : this.ownerEmail,

           buyer_name     : this.ownerNickname,

           m_redirect_url : `${domain}/store/payment/done`, // 모바일은 리디렉션을 사용한다. 아래 콜백으로 값이 들어오지 x

           notice_url : `${apiBaseURL}/order/portone_webhook`,// 웹훅을 수신할 주소

         }, function(rsp) {// pc에서는 여기 iframe 콜백방식으로 처리한다

           if ( rsp.status == 'paid' ) {// 모바일과 동일하게 그대로 redirect한다

             self.$router.push(`/store/payment/done?imp_success=true&imp_uid=${rsp.imp_uid}&merchant_uid=${rsp.merchant_uid}`);

           } else {// 결제 실패시

             self.$router.push('/store/payment/done?imp_success=false');

           }

         });

- 2번에서 받은 merchant_uid를 인자로 함께 날린다.
- 그럼 merchant_uid를 기반으로 포트원에서 결제를 진행하며 가격에 틀림이 없는지 확인하고 문제가 없다면 결제를 한다.
- m_redirect_url 와 notice_url 가 핵심이다.
- m_redirect_url 결제가 끝나면 이동할 클라 url을 넣는다. 
- pc는 콜백으로 들어오고 모바일에서는 여기로 들어온다. 따라서 결제방법을 통일하기 위해 pc의 콜백을 쓰지 않고 결제 완료 후에는 항상 여기로 이동하게 한다.
- 쿼리스트링으로 3개의 값이 함께 들어온다.  imp_success는 결제성공여부, imp_uid, merchant_uid 등이다
- notice_url 는 결제가 완료되었을 때 포트원에서 내게 보낼 웹훅 주소를 넣어준다.
- 웹훅으로는 2개의 쿼리 스트링이 들어온다. imp_uid, merchant_uid

4. 포트원 doc을 보면 콜백 위주로 설명이 되어 있는데 이건 사용하지 않는다x
- 왜냐면 콜백을 이용할 경우 네트웍 상황에 따라 결제가 누락될수도 있기 때문이란다.
https://developers.portone.io/docs/ko/auth/guide/5/post?v=v1

5. 따라서 모든 결제 처리는 notice_url로 들어온 웹훅 정보를 기반으로 한다. 
- 하지만 이 경우에는 항상 웹훅으로 먼저 데이터 처리가 된 후에 콜백이 호출되야만 pc에서 $router.push() 했을 때 정보의 누락이 없게 된다.
- 포트원에서는 이를 위해 순서 보장이 필요하다면 메일로 알려달란다.

https://developers.portone.io/docs/ko/result/webhook?v=v1 
- 메일을 보내 순서 보장을 요청했더니 바로 처리되었다.

6. 이제 웹훅에서 가격이 바뀌지 않았는지만 확인하면 된다.
- 웹훅으로 imp_uid, merchant_uid 값이 들어온다.
- 먼저 포트원에서 토큰을 받은 후 imp_uid 를 기반으로 다시 포트원에 결제 정보를 요청해 받아온다.
- 결제 정보 안에는 결제와 관련한 모든 정보들이 들어있다.
- 이제 merchant_uid 로 내 db에서 2번할때 저장해 둔 order를 불러온다.
- 그리고 이 order에 있는 가격과 포트원에서 받아온 최종 결제 정보의 가격을 비교하여 틀린게 있는지 확인한다. 이게 사후검증이다.
- 둘의 값이 같다면 완전히 안전한 결제라는 뜻이다.
- 같다면 이제 포트원에서 받아온 결제정보를 내 order에 저장하면된다. 틀리다면 해당 order에 기록을 남기고 취소하면 된다.
- 리턴은 아무것도 할 필요 없다.

7. 실패했던 성공했던 결제가 끝나면 m_redirect_url 로 imp_success, imp_uid, merchant_uid 등 3개의 쿼리스트링이 함께 들어온다. 
- 이건 포트원에서 날려주는 것이다.
- 이 정보들을 받아서 그대로 다시 내 서버로 보내준다.
- 내 서버에선 이 쿼리스트링을 다시 포트원에 날려 최종 결제 정보를 받아온다. 
- 내 DB는 뒤질 필요가 없다. 그냥 포트원에 접속해서 정보를 가져오고 그걸 다시 클라로 보내주면 된다.
- 클라에서는 해당 결제 정보가 성공이라면 성공페이지를 보여주고 실패라면 실패 페이지를 보여주면 된다.

8. 결제루틴이 완전히 달라지면서 포인트 아이템 결제는 분기시켜 따로 처리했다.

이걸로 모든기기에서 결제, 환불, 취소 시스템 개발 완료

이제 pg사 계약 진행한다.

애널리틱스 계정을 새로 만들고 새로운 태그를 받고 moonlit에 태그를 설치한다.

테스트를 누르고 연결완료를 확인한다.

다음 구글 서치 콘솔에 속성을 추가한다.

그 동안 더미로 만들었던 db collection들을 깨끗히 밀고 소셜 회원가입부터 하나하나 확인해본다.

네이버는 자신들의 api사용이 일정기간 없으면 자동으로 막힌다. 그래서 웬디처럼 인기없는 서비스는 실서비스 중임에도 중간에 api가 막혀버렸다. 정말 기가막힌 일이었다. 그래서 moonlit은 처음부터 네이버를 빼버렸다. 페북과 트위터도 너무 자주 절차가 바뀌고 권한이 바뀐다. 그래서 얘네도 뺐다. 이제 구글과 카카오만 남았다. 뭐 그럼 됐다.

고객센터 문의하기, 답변하기부터 메일 송수신, 슬랙 송수신을 테스트했다. 역시나 약간의 버그들이 있었고 역시나 금방 고쳤다.

언제봐도 슬랙의 push기능은 쉽고 유용하다.

메일은 하이웍스로 바꿨다. 예전 카카오 스마트워크 메일 계정을 썼을땐 10번 보내면 2,3번만 수신돼서 스트레스 받았는데 그 고통이 사라졌다. 다만 처음 1년은 한달에 1,600원. 다음부턴 3천원씩 내야한다. 그 동안 메일 수신이 잘 안됐던 원인이 카카오에 있는 줄 알았다면 진작에 바꿨을 것이다. 이것도 열받는다.

근데 메일을 2개 신청하려고 했더니 하이웍스에는 그런게 없었다. 5개, 10개 이런식으로만 가능했다. 내가 가난한게 죄지. 눈물이 흘렀다.

개인정보처리방침, 이용약관도 만들었다. 근데 내가 뭘 아는게 있나. 기본약관 양식을 바탕으로 이런저런 게임사이트와 cj사이트 약관들을 짜집기했다. 그런데 만들고 나니 마음에 들었다. 뭔가 정식? 회사가 된 기분이었다.

moonlit은 시詩로 도배를 할 것이다.

시로 가득한 사이트를 만들것이다.

이제 남은게 무엇이 있나

SEO 처리와 관리자 페이지에서 sitemap.xml 자동생성 및 구글에 알림 기능 넣고

영어버전도 만들어야하고 - 이건 나중에 하자

고객센터에 내용 좀 추가하고 

그 동안 만들고 싶었던 정원들도 몇십개는 만들어야 하고

아! 유료결제 pg사 결정하고 진짜 유료 결제되도록 만들어야 한다. 현재는 가장 중요한 사항이다.

이렇게 보니 거의 다 된거 같다.

moonlit이 어떻게 될까, 어떻게 세상에 알려야 할까

내가 사업가가 맞다면

이제부터 정말 잘해야하는데

눈 앞이 캄캄하다.

빛을 밝히겠다고 예전처럼 책속으로만 파고드는 거 아닐지 모르겠다.

저녁 먹고 운동하며 조금더 생각해봐야겠다

1. 모든 아이템을 하나의 스키마에 몰아 넣고 유저명으로 관리

- 기존 코드들 모두 재수정

- 모든 작업마다 카운트해서상단에 넣기

- 내 아이템 카운트와 전체 아이템 카운트를 따로 구분하기 추가하기

2. 서버에서 삭제

- serial 조건이 충족되지 않았을 때 '처음 꽃 가져오기'에서 각각의 상황에 맞게 serial 아이템 삭제하기 - 연속이 끊어지면 바로 모든 아이템을 삭제할지, 그래도 유지할지 이건 고민하자 - 지금은 그냥 바로 삭제로 만드는게 나아보인다.

3. 클라에서 보여주기

- 해당 아이템에 맞춰 보여주기

1. 애니메이션 루프 돌리고 키보드 또는 터치(마우스)로 컨트롤 하는 것까지 만들기

2. 수풀 2,3프레임짜리 애니 만들기

3. 각 상황에 맞는 프랍들 배치해서 어울리게 하기

4. 5일에 그라운드 바뀌고 돌아가는거 개발하기

5. 10일에 수풀 추가되고 삭제하는거 개발하기

6. 100일까지 나머지 프랍들 모두 적용하기(100일 이후 프랍들은 나중에 개발)

7. 프리미엄 서비스 유료 결제부터 db, 서버, 클라 및 법적인 문제처리까지 모두 개발하기

8, 시 문구 db추가하고 적용하기

9. 서비스 다듬고 오픈하기

예전, 거의 10년전의 canvas 조작 방식과 많이 달라졌다.

그땐 html5가 막 보편화되기 시작했고 브라우저마다 지원하는 함수가 달랐고 함수 이름도 모두 달랐다.

javascript에 class가 도입되기 이전이어서 object를 비슷한 느낌으로 overriding해서 사용했다.

무엇보다 가장 달라진 건 requestAnimationFrame()같은 render함수다.

이제 더 이상 setInterval()을 사용하지 않는것 같아 다행이다.

그러고 보니 svg 애니메이션은 몇개 만들어봤지만 이미지를 사용한 애니메이션을 만들어 본 적이 없었다.

구현이 간단할 거라 생각했는데 생각보다 간단하지 않았다.

1. 일단 canvas관련 코딩을 많이 잊어버렸고 - 더 이상 이런 일이 없도록 확실히 정리해놓자

2. 연습용 샘플 이미지들의 width가 모두 다르거나 가로x세로로 만들어진 스프라이트 이미지여서 처음 익숙해지는데 고생했다.

이제 타일 이미지로 배경을 채우고 requestAnimationFrame으로 애니에이션을 하고 컨트롤 하는 것까지 만들고 이걸 모듈화 해놓자.

슬라임 이미지 2장으로 만들기 연습

이제,

1. 고양이 스프라이트 이미지를 구한 후

2. 웹에서 애니메이션을 구동시켜보고

3. 좌우 이동 컨트롤을 만들어 보고

4. 둘다 코드로 모듈화 한 다음

5. 나만의 고양이 스프라이트를 만들어 적용하자

6. 내가 만든 고양이 스프라이트를 기반으로 스테이블 디퓨젼을 통해 수백가지의 버전을 만들어보고 가장 좋은것들을 찾아보자

책을 보며 하나하나 연습 중이다.

그대로 따라하면 쉬운거 같은데 책 없이 혼자 그리면 바로 얼음이 된다.

그런 부분에 있어 코딩과 비슷하다.

최선을 다하자.