안녕하세요, 대학생 웹 개발 인턴 Garden입니다 ;)
저는 저희 회사 사내 API를 사용해서 개인적으로 사이드 프로젝트를 한번 진행해봤는데요 ! (사실 제가 기획한 기능이 정말 반영되었으면 했기 때문에 시작하게 되었습니다 ㅎㅎ)
회사 API로 사이드 프로젝트를 진행한 MZ 인턴의 프로젝트 회고를 시작합니다
본 게시물은 사내 서비스 및 회사를 홍보하는 목적이 전혀 NEVER 아닙니다. 그리고 사이드 프로젝트 진행을 사내에서 공식 허락 받았습니다 굿굿
Intro.
저는
유튜버는 조회수 100만 콘텐츠를 만들 수 있도록 영상 데이터를 제공하고 광고주는 가성비 좋은 유튜버의 데이터 제공 및 광고 제안할 수 있는 플랫폼
자체 서비스를 운영 중인 회사에 프론트엔드 개발 인턴으로 현재 근무하고 있습니다.
사내 서비스를 둘러보다가 "유튜버에게도 자신의 채널 분석 데이터를 보게하자" 라는 생각과 "유튜버가 자신이 하고 싶은 광고에 대해 역제안"을 하는 기능이 있다면, 유튜버에게도 돈을 벌 수 있지 않을까 라는 생각이 들었습니다
그래서 한번 실제로 구현해보고 싶었고 제가 특히 인턴으로 입사해서 사내 개발에 추가적으로 도입했으면 좋겠는 기술을 포함해서 개발하게 되었습니다 ㅎㅎ
사내에 현재 도입되지 않은 새로운 기술을 도입하고 싶어서 추가적으로 구현한 기술 이야기는 바로 클릭해서 만나볼 수 있습니다 !
Main.
[1] 기획 의도
먼저 이 프로젝트의 기획 의도는 아래와 같습니다
따라서 효과적인 광고 효과를 내는데 극대화 해줄 서비스를 구현하게 되었습니다.
[2] 서비스 소개
1) 나에게 딱 맞는 광고주 찾기
사내에 가입된 광고주 목록을 유튜버가 확인하고 자신의 채널을 어필하게 됩니다. 광고주가 진행할 광고에 직접 유튜버들을 모집할 수 있습니다 :)
2) 내 채널 레포트(광고 제안서) 작성
원하는 광고주를 찾고, 사내 채널 분석 데이터로 완성된 광고 제안서가 자동으로 완성됩니다 바로 광고를 제안하거나, PDF로 다운받을 수 있습니다
⚠️ 주의!
예시 화면에 유튜브 채널 개인 정보이기에 채널 명/이름/영상 정보를 가립니다.
[3] 서비스 개발 분석
이제는 광고 제안서를 더 광고주에게 어필하고 매력적으로 보이기 위해 고민한 내용입니다. 사내 데이터를 가지고 새로 개발한 내용입니다!
1) 새로 개발한 데이터
2) 꼭 필요한 데이터 선정
3) 추가로 레포트 저장
[4] 이거 실제로 가능할까요?
이 채널 레포트(요약)를 광고 제안서라고 어필을 했지만 이 기능을 다양한 방식으로 도입할 수 있다고 기획팀께 어필하고자 한번 만들었습니다 ~!~!
[4] 개발 이야기 TechTalk
이제 이 사이드 프로젝트를 하면서 개인적으로 사내에 도입해보고 싶었던 기술을 직접 사용하면서 구현했던 기술 이야기를 시작하겠습니다.
1) UI 구현
“아토믹 디자인 패턴을 기반으로 UI 재사용성에 집중"
사내에서는 아토믹 디자인 패턴을 도입하여 UI 개발을 진행하고 있었습니다.
제가 온보딩 기간에 계속 고민했던 것이 한 기능(UI)에 props를 3번 이상 주기도하고, 사소한 요소한들까지 child로 내려야할까 판단하는데 고민했습니다.
하지만 이는 명확한 정답이 없다는 걸 깨달았습니다.최대한 재사용성에 집중하여 디자인을 구상하고, 특히 atoms 단위 구현에 제일 고민했습니다.
사내 개발자들끼리 원활한 atoms 요소 파악을 위하여 스토리북을 제 프로젝트에 도입했습니다.
2) 스토리북 도입
개발자가 만드는 컴포넌트를 직접 테스트 해볼 수 있다.
스토리북은 최초 개발자뿐만 아니라 다른 개발자나 디자이너 및 기획자도 쉽게 확인할 수 있어 디자인 설계에 도움을 받을 수 있습니다.
특히 atoms 요소들은 모두 스토리북으로 배포하도록 구현했습니다.
3) E2E 테스트 도입
개발물을 사용자 관점에서 테스트 하는 방법인 E2E(End-to-End)를 도입했습니다.
제 서비스의 워크플로우에 따라 데이터가 올바르게 출력되고 예시로 버튼의 기능이 잘 동작하는지를 위주로 테스트를 진행했습니다.
도입 이유?
저는 원래 테스트에 관심이 많았었는데, 그 계기는 지난 10월 우테코 프리코스때 과제 요구사항으로 처음 만났었습니다.
자세한 테스트 이야기는 아래에 제 테스트에 대한 기본 개념을 담은 벨로그 글을 공유합니다.
[인턴일지] 프론트엔드 개발에서 테스트가 필요한가요?
Client에서는 주로 유닛 테스트를 진행하지만 최종 배포 전 어플리케이션의 주요 기능들이 문제없이 작동하는지 검증하기 위한 전체 테스트를 진행하고자 합니다.
E2E Test를 하면 사용자의 동작을 모사해야 하기 때문에 사용자 입장의 Workflow와 Laytency를 측정하고 점검할 수 있습니다. 자연스럽게 사용자의 경험을 더 고민하게 되어 해당 테스트를 도입하게 되었습니다.
5) 프로젝트 기술 스택
[5] 두근두근,, 결과는?
1) 실제 도입 가능성 ?
캬 역제안 서비스는 실제로 도입하기는 어렵겠지만 채널 상세 요약은 가능해보인다고 기획팀 리더님의 피드백을 받았습니다 ㅎㅎ 뭔가 뿌듯하네요
2) 사내 테스트에 오너십을 갖다.
이 사이드 프로젝트에서 UI테스트인 스토리북, E2E 테스트를 구현하고, Cypress 자동화한 경험 때문에 팀 리더분께서 사내 개발에서 "테스트" 분야의 오너십을 가지고 한번 맡아보라는 로드맵을 가지게 되었습니다 ㅎㅎ
그래서 최근에 해당 로드맵을 받아
1) 사내에 스토리북을 도입해 세팅 및 배포함은 물론 기존 컴포넌트 요소들을 스토리북에 배포하는 작업과
2) 프론트엔드 테스트 (단위, 통합, E2E) 를 맡아 테스트 코드 작성 및 자동화 업무를 맡게 되었습니다.
기획에서 서비스 운영 업무에 추가적으로 테스트 업무를 맡게 되어서 기뻤습니다 열심히 공부해야겠어요 ,,,
End.
실제로 사내에 도입되었으면 하는 기능을 직접 기획하고 어필하기 위해 예시 기능을 개발한 경험은 저에게 큰 회사생활에 동기부여가 되어주었습니다.
사내 데이터를 사용하게 해주신 CTO Ethan에게 감사하다는 말씀과, 테스트 오너십을 부여해주신 팀 리더 Harry에게도 감사하다는 말씀을 드립니다.
저희 회사에서는 자체적으로 Open API를 제공하고 있습니다. 유튜버의 채널 분석, 수익 계산에 관심이 있으신 분들은 개인적으로도 사용해봐도 좋을 것 같아요 !
