2019년을 보내고, 2020년을 맞이하며 늦게나마 2019년도의 회고를 올린다. 본인이 많은 성장을 이뤘다고 생각된 부분을 중점으로 다룬다.

👨🏻‍💻 블랭크코퍼레이션 이직

블랭크코퍼레이션(이하 “블랭크")은 사실 내가 재직하고 있었던 회사의 모회사였다. 2018년 4월부터 블랭크의 프리랜서 개발자로 일 하다가, 자회사 입사 제의를 받았다. 그 회사에서 나는 “ITDA” 라는 패션 버티컬 커머스 플랫폼을 개발했는데, 해당 플랫폼이 회사의 경영실적에 좋지 않아, 빠르게 포기하고 다른 플랫폼 개발에 박차를 가하고 있었다.

그러다가 모회사 미디어사업 유닛에서 내가 개발했던 커머스 플랫폼을 좋게 봐주었는지, 인플루언서를 활용해보자고 제안이 왔었다. 그래서 인플루언서 사업을 공략하고 있는 미디어 사업 유닛의 재희님이 Operation을, 마케팅 유닛의 환님이 Product Owner를, 자회사의 나는 Full-stacked Engineer로 나를 포함해서 총 3명으로 급하게 “레이블스토어”라는 제품의 TF팀을 꾸렸다.

📈 레이블스토어 서비스 런칭

레이블스토어는 인플루언서들에게 최대한 쉬운 커머스 서비스를 제공해준다. 기존 인플루언서들은 자신의 소셜 채널에 상품을 판매하려면, 해당 브랜드 측의 수수료 협의, 진행 날짜, 판매 형태, 결제 방식, CS 고객응대 등 정말 많은 부분들을 신경써야 한다.

레이블스토어에서는 이러한 고충들을 한 번에 해결해준다. 인플루언서 본인이 직접 원하는 상품과 진행 기간, 수수료 협의를 제안할 수 있고, 브랜드가 해당 제안에 협의과정을 거치면 자동으로 스토어 페이지를 만들어주며, 정산과 스토어 페이지 개인화 등 많은 부분들의 고충을 해결해준다. 런칭부터 반응은 뜨거웠고, 현재는 거래액 30억, 사용자 40만명을 가진 어엿한 중견규모의 플랫폼이 되었다.

한 달 동안의 한 명의 개발 리소스로 짧은 개발기간을 걸쳐 시장에 빠르게 내어 검증해 볼 수 있었다. Front-end 부문에서는 Vue.js와 Nuxt.js를 사용하여 개발을 시작했으나, 컴포넌트 중심 개발방법과 서버사이드 랜더링의 고도화, 그리고 해당 기술들의 생태계 현황 등으로 인해 React.js와 Next.js로 사용 기술을 변경했다. Back-end 부문에서는 Sequelize와 Koa.js를 통해 REST 방식의 API 서버를 구성했으나, 얼리스테이지의 제품답게 빠른 도메인 변경에 대응하기 위해 Prisma를 통한 GraphQL을 도입하기 시작했다.

📦 E-Commerce SCM 개발

이 부분이 다른 분야의 도메인보다 크게 다르고 복잡하다는 생각이 들었다. SCM은 Supply Chain Management를 뜻하며, 전자상거래 분야에선 빠질 수 없는 개념이다.

우리가 상품을 구매하는 행위에 대해 생각해 본다면 생각보다 많은 일련의 과정이 있다는 것을 알 수 있다. 상세페이지에서 상품이 마음에 들어 장바구니에 담아, 주문서 작성부터 시작해서 완료, 내역 조회, 배송조회. 거기다가 오주문이나 단순변심으로 취소나 반품이 이뤄질 수 있고, 교환도 마찬가지다. 여기에는 또 반송장이나 맞교환 송장이 붙고, 배송지 주소도 배송 준비중 전에 변경할 수 있어야 한다. 또 그런 과정에서 귀책사유가 구매자인지, 판매자인지에 따라 환불 되는 금액을 다르게 산정해야 하는 등 여러가지 예외의 상황들을 수반해야 한다.

기존에 레이블스토어는 공동구매 특성상 예외적인 상황들이 너무 많아 이를 CS 인바운드(전화나 카카오 플러스 친구 등의 창구로 인입된 요청들)로 받아서 상담원 한 명이 직접 수기로 처리했다면, 이번 SCM 도입으로 수기처리 되는 부분들을 점진적으로 줄여나가고, 모든 클레임들을 입점 업체가 직접 확인하고, 해결하는 방식으로 개선되었다.

🛍 그리고, 결국, “자체 커머스 플랫폼”!

SCM 개발을 끝으로, 우리 팀은 어떻게 보면 쿠팡이나 티몬, 그 외 쇼핑몰 호스팅 서비스 Cafe 24나 고도몰 같은 전자상거래 플랫폼의 대부분 기능들을 (물류, CS, 배송, 샵, 개인화 등)자체적으로 개발 한 것이다. 🎉 이는 즉 블랭크의 자체 커머스 플랫폼을 만든것이다. 어떠한 전자상거래 플랫폼이건, 우리만의 자체 개발 플랫폼을 기반으로 개발하여 더욱 빠르고 안정적으로 개발할 수 있고, 새로운 사업 확장에도 큰 도움이 될 것이며, 이 플랫폼 자체가 블랭크의 엄청난 자산이 될 것이다. 어쩌면 블랭크가 쿠팡같은 큰 소셜커머스 플랫폼을 만들게 될 수도 있을지도! 👀

💁🏻‍♂️ Software Architect 로써의 성장

3명으로 시작한 팀이 지금은 11명이 됐다. 1년만에 사람도 정말 많아졌는데 그 만큼 신경써야 할 일도 많아졌다. 우리는 1주일 간격으로 스프린트를 돌리며, 하루에 한 번씩 스탠드업 미팅을 진행하고 빠르게 이슈나 태스크 진행 경과를 확인한다. 스프린트가 끝나면, 다 함께 자체 QA를 하고, 이번주 했던 태스크에 대한 회고와 코드리뷰를 진행하며, 릴리즈 날짜를 정해 운용 서버에 배포한다.

개발자 분들도 점차 늘어나고 조직이 커지다가 자연스럽게 Tech Lead 같은 역할을 하게되었다. 단순히 Front-end, Back-end 엔지니어링에 국한되는게 아니라 HCL과 Kubernetes를 활용한 인프라 운용이라던지, 실제 발생할 수 있는 취약점에 대한 웹 보안, CI/CD 자동화, Amplitude를 통한 데이터 트래킹 같은 Dev-Ops 분야, 개발 문화등 여러가지 측면에서 비즈니스 사고 중심적으로 어떤 기술을 도입할지 고민하고, 태스크를 정하고, 매주 스프린트를 진행한다. 또 제일 중요한 것. 나 뿐만 아니라, 조직 구성원들 모두의 성장을 도모한다.

비즈니스를 소프트웨어로 명확히 증명해내는 Architect가 되고싶다 😊 지금은 작고 귀엽지만, 레이블에서의 활약하고 있는 지금의 내가 첫 발걸음이 되었길.

🚀 제제스토어 런칭

레이블스토어는 브랜드와, 유명한 소셜 채널의 영향력이 있는 인플루언서를 대상으로 서비스 한다면, 제제스토어는 일반 사용자들에게 공동구매라는 개념을 가지고 다가간다. 나 포함해서 지인들 모아 총 3명이 모이면 할인 가격으로 살 수 있는 플랫폼이다.

아까 위에서 말했다시피 우리만의 자체 커머스 플랫폼이 있었기에 빠르게 다른 사업 방향으로 시도할 수 있었다. 이 플랫폼 역시 한 달 정도 개발기간의 엄청난 속도로 만들어졌고, 가설검증 기간동안에는 리스크를 줄이기 위해 나만 개발 포지션으로 참여해 개발했다. 이제 한 달도 안된 서비스라 설래고 훨씬 더 큰 시장을 확보할 수 있어 기대가 크다.

🏃🏻‍♂️ 회사 10분거리, 강남으로 이사!

돈이 없던 나에게 은혜로운 블랭크의 복지가 정말 많았는데, 그 중 정말 소중하게 이용하고 있는 제도가 “전세자금 복지제도”다. 그거슨,, 바로,,, 최대 1억원 한도에 무이자로 전세자금을 지원해주는 제도이다. 🤩

원래 신림에서 살았는데, 그 신림도 역세권 신림이 아니라, 대학동 녹두거리라고, 버스타고 쭉 들어가야 하는 신림이다. 출퇴근길에 버스가 막혀 한 시간동안 계속 도로 위에서 기다린적이 허다하다. 그래서 출퇴근 하는 데 크게는 왕복 3시간이 걸리는데 이게 어지간히 시간 낭비가 아닐 수 없겠다. 그래서 전세자금 대출 복지를 통해 회사에서 무려 10분거리 밖에 떨어져있는 집으로 이사를 왔다.

사실 이사한게 별것 아닌 것 같지만, 대광님과 같이 부동산에서 “시간을 돈으로 샀다. 하루에 3시간, 한 달에 60시간, 일 년에 720시간을 벌었다.” 라는 얘기가 장난식으로 오갔다. 그런데 진짜 장난이 아니라 내 삶에 3시간이 더 생긴 것 만으로도 삶의 질이 배로 좋아졌다. 내가 벌은 3시간 덕분에 운동도 하고 취미도 찾고 삶의 여유도 챙기며 일에 더 집중할 수 있게 되었다. 행복을 돈으로 살 순 없지만 행복할 시간을 돈으로 살 순 있더라.

💪🏻 어떻게 더 빨리 성장할 수 있을까?

첫 직장에 취직한 이후 프로그래머로 월급쟁이가 된지 4년이 지난걸 은행 업무 처리 중 급여 통장 개설일을 보고 우연히 알았다. 그 동안 참 많은 일들이 있었고, 많은 전환점 들이 주마등처럼 스쳐 지나갔는데, 그 중에서도 제일 뜻 깊게 느낀 점들을 추려보자면.

• 더 큰것들을 생각하기 위해 위임할 수 있는 것들은 다른 사람에게 최대한 위임하자. [1]
• 소프트웨어 개발은 비즈니스라는 목적을 이루기 위한 수단이다. 코드 한 줄 안짜고 해결할 수 있으면 그 방법이 제일이다.
• 항상 내가 생각하는 것이나 추구하는 것이 틀렸을 수도 있다. 그 사실을 인정하고 받아들이며, 변화와 성장의 기회로 생각한다.

큰 것 들은 이 정도. 사실 이것보다 훨씬 많지만 나머지는 비밀. 😇

👏🏻 마치며

뭔가 글을 다 쓰다보니 블랭크로 시작해서 블랭크로 끝났는데, 그 정도로 블랭크가 나의 성장에 정말 많은 영향을 주었다. 함께 고생한 우리 레이블 식구들, 같이 응원해주고 도와주신 블랭커 여러분들, 대광님까지 이 자리를 빌어서 감사했다는 말씀 올리고 글 마친다. 읽어주셔서 감사해요.

아 참, 2020년도 올해의 내 목표는 작년, 재작년과 똑같다. “어떻게 더 빨리 성장할 수 있을까?” 성장. 또 성장이다.🚀🔥

References

• [1] 머니맨 에세이 “가장 확실하게 부자가 되는 방법”

특히 나는 실무 하는 걸 좋아하고 잘하는 편이라 남에게 일 시키는 게 더 힘들었다. 일이 서툰 동료들 보면 답답해서 직접 해결하고 싶은 적이 한두 번이 아니다. 그래도 꾹 참고 맡겼다. 동료들이 나보다 잘하지 못하면 나는 평생 그 일에서 해방될 수 없으니까. 이젠 분야별로 선수들이 있어서 내가 신경 쓸 필요 없다.

안녕하세요. 블랭크코퍼레이션에서 인플루언서 공동구매 플랫폼 레이블스토어의 개발팀을 이끌고있는 염승우 입니다! 🚀

급속도로 성장중인 레이블스토어의 새로운 버전을 개발하면서 Prisma로 GraphQL을 도입 할 수 있었던 경험을 공유해보려고 합니다.

우리는 왜 Prisma를 선택했는가?

Prisma를 도입하기 전, 레이블스토어 개발팀은 Sequelize ORM을 사용했었습니다. Sequelize는 Node.js 개발 진영에서는 다른 ORM 보다 뛰어난 성능, 간편한 마이그레이션 및 모델 작성 등으로 독보적으로 유명합니다.

하지만 변경점이 생길 때 마다 모델과 마이그레이션을 따로 관리해야 한다는 점이 매우 불편했습니다. 얼리스테이지 제품 개발의 특성상 테이블과 컬럼 그리고 그것들의 관계(Relationship)에 대한 추가와 수정이 잦았는데, 이에 대응하는것이 많이 불편했죠.

또한 단순히 모델과 마이그레이션을 관리하는 것이 아니라, RESTful API 에서의 추가적인 대응 작업마저 번거롭기 일쑤였습니다. API가 추가될 때는 Endpoint를 계속해서 만들어 주어야 하고, 그것들을 별개로 관리하기란 참으로 불편했죠.

저희 개발팀은 이런 불편에 대안을 찾던 중 Prisma를 찾게되었습니다. Prisma는 앞서 말했던 불편한 점을 개선했음은 물론, 아래와 같은 강력한 기능을 제공하고 있었어요.

1. GraphQL 형식의 데이터모델만 작성하면 사용하는 언어와 DBMS에 구애받지 않고, ORM 클라이언트와 모델, 그리고 Data Schema 가 자동으로 생성된다.
2. GraphQL, REST API의 구현체를 제공해준다.
3. 자체 어드민 페이지를 제공하여 쉬운 데이터 운용이 가능하다. (비개발자도 손쉽게 쓸 수 있을 정도.)

이런 장점들 외에도 ZEIT, GraphQL, Heroku, Netlify 등과 같은 유명한 회사나 기술창립자 분들, 그리고 스탠포드 대학교, 클라이너 퍼킨스 와 같은 대규모 단체의 투자도 함께 받았다는 점이 저희에게 신뢰감을 주었습니다.

Prisma는 어떻게 동작하는가?

Prisma는 기존 ORM의 동작방식과는 조금 다릅니다. Sequelize나 TypeORM과 같은 기존 ORM은 DB 호스트에 직접적인 Connection을 이루어 트랜잭션을 수행하는데요. Prisma 같은 경우는 Scala로 작성된 Prisma의 서버가 DB 호스트를 앞단에서 관리합니다.

이 후 GraphQL 형식의 DataModel을 정의하면 Prisma가 알아서 사용하고있는 DBMS와 언어의 종류에 맞게 실제 DB 배포부터, 클라이언트와 모델 그리고 타입정의까지 자동으로 만들어 제공해 줍니다. 또한 GraphQL의 구현체까지 모두 정의되어있죠.

글 작성 날짜를 기준으로, 현재 지원하고 있는 언어는 JavaScript, TypeScript, Go 이며, DBMS는 Postgres, MySQL, mongoDB을 지원하고 있습니다. (추후에는 Elastic Search와 Oracle을 지원할 예정이라고 합니다.)

만들어진 클라이언트와 모델 그리고 구현체 등을 바탕으로 실제 서버에 적용하면 끝입니다. 주로 apollo-server을 이용하여 구현체(Resolvers)를 그대로 활용합니다.

한 번 사용해볼까요?

Prisma를 사용하기 위해선 일단 CLI 애플리케이션을 설치해야합니다. 사용하시는 패키지 매니저로 아래와 같이 설치해주세요.

// Yarn을 사용한다면
$ yarn global add prisma

// NPM을 사용한다면
$ npm i -g prisma

Prisma CLI를 통해 로컬환경에서 설정하기

$ prisma init

방법은 정말 간단합니다. 위 커맨드를 실행하시고 원하는 DBMS와 Client 언어를 선택하면 되는데요. 저는 MySQL과 TypeScript의 Prisma 클라이언트를 선택했습니다.

그러면 Prisma CLI는 그에 맞게 Prisma Server를 컨테이너 형태로 올릴 수 있는 docker-compose 파일, prisma 설정 파일인 prisma.yml, 그리고 GraphQL 형태로 데이터 모델링을 할 수 있는 datamodel.prisma 파일을 자동으로 생성합니다. 우린 이 세가지 파일들로 Prisma를 사용해볼겁니다.

Prisma Server 구동

$ docker-compose up -d

이렇게 Docker 이미지를 받고, 컨테이너로써 실행되면 localhost:4466 으로 prisma 서버가 실행됩니다. 우린 이제 이 엔드포인트로써 Prisma 서버를 사용할 수 있습니다.

이제 기본 설정은 끝났습니다! 🙆‍♂️

해당 과정이 번거롭다면 AWS Cloudformation를 통해 쉽게 구축할 수 있으니 이 방법을 시도해보는것도 좋습니다. (튜토리얼 링크)

데이터 모델 작성

데이터 모델은 GraphQL 형식의 작성 방식과 거의 동일합니다. 예시로 계정과 프로필 그리고 그 계정으로 글을 쓴다는 시나리오를 가정하고 Account, Profile, Post 각각 1:1:N 관계에 있는 타입을 간단히 정의해보겠습니다. datamodel.prisma 파일을 아래와 같이 작성해주세요.

type Account {
  id: ID! @id
  email: String!
  profile: Profile!
  posts: [Post!]!
  createdAt: DateTime! @createdAt
  updatedAt: DateTime! @updatedAt
}

type Profile {
  id: ID! @id
  account: Account! @relation(link: INLINE)
  bio: String
  websiteURL: String
  createdAt: DateTime! @createdAt
  updatedAt: DateTime! @updatedAt
}

type Post {
  id: ID! @id
  content: String!
  author: Account! @relation(link: INLINE)
  createdAt: DateTime! @createdAt
  updatedAt: DateTime! @updatedAt
}

기존 데이터베이스에서 데이터 모델 작성

Prisma에는 Introspect라는 기능이 있습니다. 이 기능은 Prisma에서 해당 데이터베이스의 정보를 읽고 자동으로 DataModel 을 작성해주는데요. 기존 데이터베이스를 그대로 Prisma 에서 사용하려면 아래와 같이 입력 후 데이터베이스 서버 정보를 입력합니다. 이 후 Prisma에서 기존 데이터베이스 정보들을 바탕으로 DataModel을 자동으로 작성해줍니다.

Prisma 서버에 변경점 적용

$ prisma deploy

이제 위와 같이 입력해주세요. 모든 변경점이 실제 데이터베이스에 적용되며, 모델과 클라이언트들이 자동으로 변경점에 대한 업데이트를 진행할겁니다.

위처럼 변경점이 적용되었다는 결과가 뜨면 성공적으로 서버에 적용되었다는 뜻입니다. 이제 http://localhost:4466 으로 접속해볼게요.

지금 보시는 화면은 GraphQL Playground 인데요. Prisma 서버에 직접적으로 질의(Query, Mutation, Subscription)을 요청할 수 있으며, 응답 결과를 보여주고, Schema와 Docs를 제공해주는 역할을 합니다. 여기에 GraphQL 문법을 사용해서 간단히 계정을 생성하고, 자기소개를 적고, 글도 같이 한 번 써보는 질의를 던져볼게요.

GraphQL 질의 문법은 여기를 참고하세요.

요청된 Query

mutation {
  createAccount(
// 생성될 계정의 데이터
    data :{
      email : "jade@yeom.me",
      profile :{
        create : {
         bio : "I'm Jade"  
        }
      }
      posts : {
        create : {
          content : "이렇게 GraphQL Mutation으로 계정을 만들 수 있네요."
        }
      }
    }
  ){ 
// Response로 받을 Account의 Fields를 명세 
    profile {
      id
      bio
      createdAt
      updatedAt
    }
    posts {
      content
      createdAt
      updatedAt
    }
  }
}

응답된 Response

{
  "data": {
    "createAccount": {
      "profile": {
        "id": "cjxudbg9d00680937b5ihuyb1",
        "bio": "I'm Jade",
        "createdAt": "2019-07-08T12:34:49.481Z",
        "updatedAt": "2019-07-08T12:34:49.481Z"
      },
      "posts": [
        {
          "content": "이렇게 GraphQL Mutation으로 계정을 만들 수 있네요.",
          "createdAt": "2019-07-08T12:34:49.482Z",
          "updatedAt": "2019-07-08T12:34:49.482Z"
        }
      ]
    }
  }
}

어떤가요? 정말 간단하죠! 기존의 고전적인 ORM을 사용해서 만들었으면, Relation 신경써야하고, JOIN 걸어야 하고, 트랜잭션 하나하나 일일이 신경쓸게 많아서 정말 시간이 들었을거예요.

이런 기본적인 CRUD 형태의 간단한 질의 말고도 Sorting, Filtering, Subscription의 Resolvers는 Prisma가 모두 자동으로 만들어 제공합니다.

실 운영 환경에서는 Prisma GraphQL 서버를 그대로 사용해서는 안되며, Apollo Server와 같은 GraphQL Server의 Resolver를 Prisma에서 제공해준 구현체와 연결하여 사용하는 것이 좋습니다.

레이블스토어 ❤️ Prisma

레이블스토어는 Sequelize를 사용하던 모든 애플리케이션들을 Prisma로 대체하였습니다.

레이블스토어의 백오피스와 B2C 애플리케이션 모두 Prisma의 GraphQL로 개발되었습니다. 프론트엔드는 React, Next.js와 apollo-client를 사용하여 대부분의 애플리케이션을 개발하고 있으며, 백엔드는 Express기반의 apollo-server를 사용하고 있습니다. 아직까지는 저희 Prisma 서버의 다운타임은 발생하지 않았습니다. 비교적 Stable 하게 Production 환경에서 운용되고 있고, 혹여 모를 대규모 트래픽에 대비하기 위해 ECS 위에서 운용되고 있는 모든 클러스터는 Auto Scaling 설정이 되어있습니다.

Prisma에서 기본적으로 제공하는 어드민 페이지도 적극 활용하고 있습니다. 이 덕분에 비개발 영역에 있으신 분들이지만, 운영업무를 보시는 분들께서 백오피스에서 건들기 힘든 세세한 부분들도 쉽게 수정할 수 있으며, 퍼포먼스 마케터 분들과 같이 날 것의 데이터를 원하시는 분들도 손쉽게 데이터를 뽑아서 볼 수 있도록 열어드리고 있습니다.

Prisma로 정의한 모든 타입들은 Subscription을 지원합니다. Subscription은 Pubsub 패턴의 실시간성 API로써 데이터의 Created, Updated, Deleted에 대한 모든 이벤트를 WebSocket을 통해 받아볼 수 있는데요. 이번 레이블스토어 개발팀은 유저간의 채팅을 구현하기 위해 Subscription 기능을 통해 채널톡과 유사하지만 유저들 간의 채팅이 가능한 기능을 단 이틀 만에 만들었습니다! 😊

Prisma 2 is Coming

Prisma의 새로운 버전의 RFC가 작성된 이후 새로운 버전 개발에 박차를 가하고 있습니다. 주요 변경점은 별도로 운용해야했던 Prisma Server의 의존성을 없애고 자체 쿼리 엔진과 마이그레이션 엔진을 Standalone 형태로 사용할 수 있다는 점이 크며, 기존 버전의 알려진 많은 이슈들을 해결했다고 합니다. 로드맵 상으로는 올해 안으로는 나올 것 같고, 이번에 열린 GraphQL Conf Berlin 2019 행사 이후 Prisma2의 Preview를 공개했다고 하니 체험해보셔도 좋을 것 같습니다.

끝 마치며

레이블스토어는 날마다 성장하고 있고, 이에 빠르게 변화하는 모든 상황에 준비하고 있습니다. 다음은 레이블스토어의 시스템 아키텍쳐에 대해 공유해보려고 합니다.

읽어주셔서 감사합니다!

―

우리는 더 빠르게 달리기 위해 뜻을 같이 할 동료를 찾고있습니다. 혹시나 저희 팀에 관심이 있으시면 아래 채용공고도 함께 둘러봐주세요. 🙏

레이블스토어 개발자 채용공고 🚀

블랭크코퍼레이션 채용공고 🙌

Prisma로 GraphQL을 쉽게 도입하기 was originally published in LABELSTORE ENGINEERING on Medium, where people are continuing the conversation by highlighting and responding to this story.