미리보기

역할

1. 상점 설계 및 개발 - Toss Payments

• 장바구니, 구매 기능을 구현했습니다.

  • 구매 시 PG 사와의 데이터 일치와 이중 결제등의 보안 문제를 위해 멱동성 키를 도입하고 유저의 의도성 데이터 조작을 우려한 실 데이터 체크를 중점적으로 구현하였습니다.

• 판매자 매출 관리 및 상품 관리 백오피스를 구현했습니다.

  • 판매자의 일별, 월별, 연도별 매출에 대한 overview

  • 월별 정산서 기능을 구현하였습니다.

2. 관리자 알림 기능 구현 - Slack API

• 어드민 백오피스 로그인 인증번호 기능 구현

  • 기존 백오피스 로그인 시, 구성원들의 이메일에 인증번호를 발송하는 형태를 사용하고 있었습니다. SMTP
    

    DRF의 SMTP 발송은 동기적인 작업이기에 약 2~3초의 지연이 생기고 메일을 보내고 확인하는 데까지 10여 초 가량 소요된다는 사실을 파악했습니다.
    

    이를 개선하고자,
    Slack API를 이용해 회사 Slack Bot을 생성하여 권한 부여 이후 로그인 시도 시 해당 계정에 DM으로 인증번호를 전송하여 10초 이상 걸리던 프로세스를 3초 이하로 줄였습니다. (약 70% 이상 감소)

• 유저 문의, 상품 생성, 상품 수정 등 문의사항 알림 기능 구현

  • 유저의 상품 생성과 수정이 많은 플랫폼 특성상, 어드민의 승인 속도가 빠르면 빠를수록 유저의 경험이 높을 것이라고 생각했습니다.
    
    어플리케이션 개발을 염두해 두지 않아서 알람기능을 구현하지 않았습니다. 그렇기에 일일히 백오피스에 들어가 확인해야 한다는 문제점을 파악했습니다. (인력을 24시간 사용할 수 없음)
    
    이를 개선하고자,
    Slack API를 이용하여 각 문의사항의 타입, 요청자, 요청 내용, 변경 사항의 미리보기, 문의내용 링크가 포함된 메세지를 #문의내용 채널로 보내 문의 티켓이 만들어진 즉시 확인할 수 있도록 하였습니다.

3. 개발 및 배포환경 통일화 - Docker Container

경험

창업 맴버로서 기획부터 배포까지의 경험

모든 기획부터 개발, 배포까지의 경험이 있습니다.

단순한 개발만을 생각하는 것이 아닌 방향과 컨셉, BM 까지 같이 고민하며 개발한 경험입니다.

이 경험으로 사용자 경험 위주의 기획과 개발을 하려 노력하고 있습니다.

두번의 Migration 경험

Spring Boot ➡ Django ➡ Next.js + Django Rest Framework

두 번의 Migration 경험을 1년안에 해냈습니다.

Backend 서버 기준
평균 100ms ~ 300 ms의 처리 속도에서 평균 50ms ~ 150ms의 처리 속도를 확인할 수 있었습니다. (50% 향상)

외부 API 연동 경험

Paypal, Tosspayments, OAuth2, Notion + Slack API

팀 구성

총 5명으로 구성되어 백엔드 3명 프론트 2명으로 구성되어 있습니다.

저는 이번 프로젝트의 아이디어 제공자로 PM과 백앤드의 역할로 프로젝트를 진행했습니다.

스택

Next.js, Django Rest Framework, MongoDB, MariaDB, Redis

기획 의도

해당 프로젝트는 팝업스토어를 참 좋아하던 한 청년(본인)이 팝업스토어에 대한 한 의문으로 만들어졌습니다.

🙋‍♂ 팝업스토어는 한번 열면 얼마나 들까 ?

팝업스토어는 임대와 디자인, 시공, 운영, 철수, 폐기물 처리까지 대략 3000만원에서 약 3억 정도까지 요즘 기업들에게 가장 주목받는 마케팅 요소입니다. 하지만 여기서 저는 임대, 운영, 폐기물 처리 이 세개의 키워드에 눈이 갔습니다.

1. 임대, 운영

이 키워드들는 저에게 소상공인 이 과연 임대와 운영을 할 수 있는 상황일까? 라는 의문점을 남겨주었습니다.

2.폐기물 처리

서울 성수동에서는 매달 평균 90개의 팝업스토어가 생기고 사라집니다. 성수동 뿐만 아니라 잠실, 강남, 더현대 등 많은 팝업스토어들을 포함해보면 약 150개 정도의 팝업스토어가 있을것이라고 예상했습니다.

매달 생기고 사라지는 이 팝업스토어에서 생겨난 폐기물은 환경에 어떠한 영향을 주고있을까? 라는 의문점을 남겨주었습니다.

그렇다면, 우리 '팝핑' 은 어떤 프로젝트 일까요?

팝업스토어의 온라인 화로 오프라인에서 진행하고 있는 팝업스토어를 온라인에서 열 수 있도록 하는 플랫폼 입니다.

팝핑은 소상공인의 팝업스토어의 기회와 지방권 소비자들의 팝업스토어 참여 마지막으로 온라인 팝업스토어로 폐기물을 줄이는 것을 목표로 하고있습니다.

역할

프로젝트 부분에서 설명하였습니다 !

시작하게 된 동기

개발을 배우던 당시, 이 배움을 어떻게 하면 더 나의 것으로 만들 수 있을까 고민하던 중에 내가 누군가를 도와줄 정도가 되려면 더 정확한 지식이 있어야 가능한데, 지식IN의 질문에 답변을 작성하기 위해 더 고민하고 다시 한 번 점검해 보는 습관을 만들기 위해 시작하게 되었습니다.

결과

총 690개의 질문에 답변을 했고 도움을 받은 질문자 수는 552명, 채택된 답변 427개 - 74.1%의 채택률, 상위 0.05%

지식인은 내공과 채택을 댓가로 하는 플랫폼으로 빠르고 정확한 답변이 중요했습니다. 그렇기에 답변을 달기위해 원론적인 부분과 설명하기 쉽게 공부하는 방법을 얻게되었습니다.

팀구성, 기획의도

대외활동 파트에 첨부하도록 하겠습니다.

역할

1. 개발 스택 기획

• MongoDB (NOSQL)

  • 많은 팝업스토어 정보를 다뤄야 하고 복잡한 조인의 관계도 없고 이미지 최적화(webp 변환 + Base64)를 위해 MondoDB의 GridFS를 사용하기 위해 선택하였습니다.

• Reids (In-Memory DB)

  • 메인페이지 온보딩 시 팝업스토어 사진의 로딩시간이 길다는걸 파악했습니다.
    - 1차 해결
    이미지 파일 png -> webp로 변환하여 저장하였습니다.
    - 2차 해결
    메인 페이지에서 사용하는 팝업스토어의 리스트 (총 19개)의 데이터를 Redis에 적재해 api의 호출 없이 사용할 수 있도록 하였습니다.

    
    - 3차 해결
    스캘레톤 로딩 방식을 이용하여 유저의 경험을 개선하였습니다.
    
    이를 통해 유저 경험 개선과 로딩시간의 약 80%를 감소할 수 있었습니다.

2. 팝업스토어 상세 페이지 퍼블리싱 및 개발

• Naver Map API

  • 팝업스토어의 오프라인 주소의 지도 정보를 가지고 왔습니다.

• 좋아요 및 조회수 기능

  • '인기 팝업스토어'의 기준이 되는 score로 사용하기 위한 기능입니다.

• 스켈레톤 로딩 구현

3. 클라이언트(유저) 브라우저 Session Storage 사용

• 최근 본 팝업스토어, 저장(좋아요) 한 팝업스토어, 저장한 상품

  • Session Storage는 브라우저 종료시 발화되는 브라우저 저장소입니다.

    • 최근 본 팝업스토어
      유저가 클릭해 상세 팝업스토어 정보를 본 경우, 해당 팝업스토어의 데이터를 list에 저장한 뒤, 해당 key가 존재할 경우, Server에 정보 요청없이 Client에서 사용하는 형식입니다.

    • 저장한 팝업스토어, 저장한 상품
      해당 정보는 Database에 저장되어 Session Storage와 항상 Snyc 하도록 개발하였습니다. 데이터를 가지고 오는 방식은 최근 본 팝업스토어와 동일합니다.

      Sync 하는 시기
      1. 로그인
      2. 저장 및 저장 내용 삭제 요청 시

Sync 시기에만 통신을 하는 형식으로 구현하여 '관심' 페이지에서 매번 같은 정보들을 위한 API 통신을 하지 않고 유저에게 정보를 빠르게 보여줄 수 있었습니다.

4. 온라인 팝업스토어 페이지 퍼블리싱 및 개발

• 팝업스토어 입장 스탬프 기능 기획 개발

  • MD 상품 구매 페이지를 들어가기 위한 체험형 스탬프 기능을 구현하였습니다.
    1. 브랜드의 스토리텔링 가능
    2. 컨셉에 맞는 게임 개발 (OX 퀴즈, 시간을 맞춰라)
    3. 아웃링크 방문 가능

  • 상점 기능 구현하였습니다.

    • 상품 상세 페이지
      색상, 사이즈, 수량 선택, 각 탭별 가이드 제공

    • 장바구니
      옵션 변경, 상품 [전체] 삭제

    • 구매 (실 구매 로직은 포함되지 않았습니다.)

    • 상품 저장