[Assignment 10 회고록] 콜로세움 - 프로젝트 설계와 테크 스펙

이다은·2021년 9월 12일
2

프리온보딩-회고록

목록 보기
11/11
post-thumbnail

🔗 과제 링크 - 노션


과제 내용

콜로세움에서는 CS처리를 위해 카카오톡과 유선의 방식을 사용하고 있습니다.
해당 매체들을 통해 셀러 또는 창고 작업자들과 협업을 하고 있습니다. 하지만 셀러와 창고주의 수가 늘어남에 따라 모니터에 띄워야 하는 메신저의 수는 많아지고 있어 이를 해결하기 위해 여러 곳에서 들어오는 톡을 한곳에서 읽고 내용을 기록하고 처리하고자 합니다.

착안사항은 다음과 같습니다.

  • 여러명의 인원이 한 화면을 보고 처리 가능해야 한다.
  • 1명 이상의 인원이 동일한 카톡의 내용을 보고 기록해 놓을 수 있어야 한다.
  • 전체 대화의 내용은 DB에 기록이 되어야 한다.
  • 카카오톡은 수신 뿐 아니라 응대가 가능하도록 송신의 기능도 가능해야 한다.

🔰 테크 스펙 이란?

> 뱅크샐러드 테크 스펙 템플릿

  • 테크 스펙은 뱅크샐러드 회사에서 나온 용어로, 기술(tech) 설명서(spec)를 말한다.
  • 기능을 구현하기 전에 이 기능을 어떻게 구현할 것인지 기술적으로 풀어 설명하고, 제안하는 글이다.
  • 테크 스펙은 실제 개발에 바로 들어갈 수 있을 것 처럼 자세하게 적어서 실제 플랫폼 코드가 포함되는 경우도 많다.

🔰 작성한 5가지 사항

  • 요약 (Summary)

    ➡ 테크 스펙을 대략적으로 정리
    ➡ 누가/무엇을/언제/어디서/왜를 간략하면서도 명확하게 작성

  • 배경 (Background)

    ➡ 프로젝트의 Context 작성
    ➡ 왜 이걸 만드나? 동기는 무엇인가? 어떤 사용자 문제를 해결하려 하는가?
        이전에 이런 시도가 있었는가? 있었다면, 해결이 되었었나?

  • 목표 (Goals)

    ➡ 얻을 예상 결과들을 Bullet Point 형태로 나열
    ➡ 이 목표들와 측정가능한 임팩트들을 이용해 이 프로젝트의 성공 여부를 평가하게 된다.
        “우리는 우리의 의도한 목표와 임팩트들을 이뤄 냈는가?”

  • 목표가 아닌 것 (Non-goals)

    ➡ 프로젝트에 연관되어 있으나 의도적으로 하지 않거나 해결하지 않으려 하는 것 작성.
    ➡ 독자가 직관적으로 이해할 수 있도록 Bullet Point 형태로 읽기 쉽게 작성
    ➡ 목표가 아닌 것을 정하게 되면 프로젝트 범위를 더 명확하게 할 수 있고,
        이 기능도 붙이자, 저 기능도 붙이자 하는 것을 막을 수 있다.

  • ✨ 계획 (Plan)

    ➡ 테크 문서에서 가장 긴 파트
    어떻게 기술적, 엔지니어링적으로 접근할지 상세히 묘사
    ➡ 어떻게 할지 확실히 결정하지 못한 상태라면, 어떤 것들을 고려하고 있는지 다 목록화해서 작성


🔰 계획 부분 설명

  • "테크 스펙은 실제 개발에 바로 들어갈 수 있을 것 처럼 자세하게 적어서 실제 플랫폼 코드가 포함되는 경우도 많다." 라는 부분을 보고 최대한 자세하게 작성하기 위해 노력했습니다.

  • 팀원들과 함께 아래의 1~5까지의 과정을 함께 토론하고 작성했습니다.


1. 유저 스토리 & 시나리오 > 작성 링크

  • 웹 사이트를 이용할 콜로세움 CS 직원 입장에서 어떠한 기능이 필요하고,
    어떠한 순서로 작업이 이루워져야 하는지 생각해보고 작성을 진행하였습니다.

2. 피그마를 통한 시각화 > 피그마 링크

  • 작성한 유저 스토리 및 시나리오를 바탕으로 실제 CS 직원이 사용한다면, 어떠한 UI로 설계되면 좋을지 의논했습니다.

  • 크게 3개의 상담목록, 고객상담, 고객정보 section으로 나누어, 각각 필요한 기능을 만들어 보았습니다.


3. 컴포넌트 설계 > 작성 링크

  • 구현되어야 할 이미지를 첨부하고, 각각의 컴포넌트가 어떻게 개발되어야 할지에 대해 작성하여 글로 작성하는 것보다 설계자의 의도를 정확하게 전달하고자 하였습니다.
  • 크게 3개의 상담목록, 고객상담, 고객정보 section과 그 하위에 필요한 컴포넌트들을 모두 작성하여 계층 구조로 표현하였습니다.
    컴포넌트 구조

4. DB 테이블 설계 > 작성 링크

  • 피그마 및 컴포넌트 설계 내용을 바탕으로 DB에 저장되어야 할 목록을 작성했고, 생성해야 할 DB 테이블 간 관계에 대해 생각하며 작성하였습니다.


5. API 및 웹소켓 설계 > API 링크 > 웹소켓 링크

  • "카카오톡에 고객의 문의내용을 남기면, CS팀에서 바로 응대가 가능해야한다"라는 전제 조건에 대해 생각하고 방법에 대해 논의하였습니다.

  • 그러나, 카카오톡 개발자 API 명세를 찾아보니 CS팀➡고객에게 카톡 메세지를 송신할 수 있는 방법에 대해서는 찾았지만, 고객➡CS팀에 문의한 수신 내용을 실시간으로 확인할 수 있는 API는 현재 없는 것으로 보입니다.

  • 카카오톡 비즈니스 "상담톡"을 이용하면, 유료이긴 하지만 고객의 문의 내용을 실시간으로 확인할 수 있는 API를 제공받을 수 있습니다. 따라서 해당 프로젝트 설계의 전제는 콜로세움에서 "카카오톡 상담톡을 통해 고객의 CS 문의내용을 입력받고, 백엔드 팀에서 해당 API를 활용하여 고객의 문의내용을 관리해준다." 라고 설계하였습니다.

  • 프론트엔드 개발자는 백엔드 팀에서 만들어준 API를 사용하여, 전체 CS 문의 내용 및 특정 CS 문의 내용, 고객 정보등을 사용하여 기능을 구현할 수 있습니다.

  • 또한 CS 상담 직원이 메세지를 보내거나, 진행 상태를 변경할 때 서버와 클라이언트 간 양방향 소통을 할 수 있도록 웹소켓 사용에 대한 내용도 고려하였습니다.

profile
단단_프로트엔드개발자!

0개의 댓글