미리보기

[담당 업무]

• FE: JS, JQuery, SCSS등을 활용해 UI/UX 최적화에 기여

• BE: Node.js, AWS(EC2, S3)를 사용해 서버 사이드 로직 개발 및 MongoDB로 DB 관리

• 검색 호출 api 성능 개선을 위한 분리 및 DB 캐시 도입으로 서비스 속도 7s → 1s 약 86% 향상

• 팀 최초 크롬 익스텐션 템플릿 도입 및 판다랭크 크롬 익스텐션 서비스 런칭

• 런칭 후 꾸준히 DAU 1,000 유지 중인 판다 AI 개발

• SCSS를 사용하면서 복잡해지는 코드를 관리하기 위해 디자인 시스템 구축

[글쓰기 가이드 서비스, 판다 AI 프로젝트]

• 배경: 블로그 글쓰기가 어렵다는 문제를 VoC로 확인. AI를 이용해 글쓰기를 보다 쉽게 작성할 수 있도록 하기 위해 프로젝트 진행.

• 기술: HTML, Javascript, Scss, Node.js, jQuery, MongoDB, AWS - S3

• 액션:

  • Streaming 기법으로 UI 작업

  • AWS S3을 이용해 이미지 업로드, 접근 제한 설정해 서버 비용 절감

  • 이전 결과물 다시 볼 수 있는 아카이빙 기능 개발

• 성과:

  • 런칭 후 꾸준히 DAU 1,000 유지 중인 서비스

  • 네이버 프로젝트 '꽃' 사무국과 AI 기술을 이용해 소상공인을 돕는 'AI RIDE' 캠페인 진행

    • 링크

[판다랭크 크롬익스텐션]

• 배경: '스마트 스토어 페이지 안에서 판다랭크 서비스를 함께 이용할 수 있다면 유저 편의성이 올라 유입이 증가할 것이다' 라는 아이디어 제시 및 1인 프로젝트로 진행

• 기술: React, TypeScript, Css, AWS - EC2

• 액션:

  • 라우저 탭이 꺼지지 않는 한, 가장 마지막 검색한 키워드에 대한 값을 기억하기 위해 Session Storage 사용

  • AWS EC2 라운드 로빈을 사용해 트래픽 분산 처리

• 성과: 팀 최초 크롬 익스텐션 템플릿 도입

[디자인 시스템]

• 배경: Scss로 모든 스타일 작업을 하니 코드가 복잡하고 지저분한 코드를 줄이기 위해 디자인 시스템 진행

• 액션: JQuery, Node.js로 만들어진 프로덕트에 맞춰 Class Name을 기준으로 스타일 토큰(컴포넌트) 제작

• 성과: Scss 코드 간결화 및 관리 용이로 인한 작업 효율 향상

[키워드 분석 호출 api 로직 개선 프로젝트]

• 배경: 키워드 분석으로 검색시 시간이 오래 걸려 불편하다는 CS 문의 확인

• 기술: Javascript, Node.js

• 액션:

  • 스파게티 코드로 여러 api가 호출되는 레거시 컨트롤러를 기능별로 분리

  • 검색 키워드 데이터를 DB에 저장해 캐싱화 처리.

  • DB의 index를 추가해 DB 탐색 속도 향상

    • 기존 id, create_dt만 있던 index에 keyword, use_yn, user_tp 등 유저별 세부 요소 추가

• 성과: 응답 시간 7초 → 1초로 약 86% 향상
  
  [카카오 소셜 로그인]

• 배경: 구글 소셜 로그인만 있던 상황에서 카카오 소셜 로그인을 추가해 다양한 회원 가입 경로 확보

• 기술: Javascript, Node.js, Kakao OAuth, JWT

• 액션:

  • 카카오 OAuth를 사용해 로그인 기능 구현 및 JWT 방식(Access Token, Refresh Token)으로

    보안성, 안전성 향상

• 성과: 유저 가입 경로 확보로 회원가입률 45% 향상

[오늘의 키워드]

• 배경: 유저 방문율을 증가시키기 위해 오늘의 추천 키워드를 알림톡으로 발송하는 프로젝트 진행

• 기술: Javascript, Node.js

• 액션:

  • 카테고리별 추천 키워드를 카카오톡 알림톡 오픈 api를 이용해 발송

• 성과: 런칭 후 1달동안 매주 600명(약 2,400명) 이상 회원 가입 증가

[어드민 내 광고 세팅 및 관리 기능]

• 배경: 운영팀에서 광고 세팅 및 관리를 할 때 개발자에게 요청한 후 코드에서 직접 관리하다 보니 서로 병목 현상이 생기는 경우가 발생. 운영팀에서 직접 관리할 수 있도록 어드민에서 직접 조작 가능하도록 기능 구현.

• 기술: HTML, Javascript, Scss, Node.js, jQuery, MongoDB, AWS - S3

• 액션:

  • 광고 이미지는 AWS S3을 이용해 자동 업로드 및 관리

  • 광고 효율 관련한 adLogs 컬렉션에서 필요한 지표 쿼리문으로 뽑아 대시보드에 노출

• 성과:

  • 광고 세팅으로 인한 개발팀, 운영팀 간 소통 리소스 감소

  • 운영팀에서 직접 광고 세팅 및 지표 관리 등이 가능해 업무 효율 향상

• 글로벌 SaaS 대시보드 프로젝트를 FE, BE, 디자이너, QA 담당자와 프로젝트를 기획부터 배포까지 전체 매니징

• 총 81개의 프로젝트 작업 기획 및 매니징

  • 콤보 차트(라인&Bar) 및 위젯화 기획

  • 리포트 전용 스몰 테이블 기획

  • 국내외 매체 채널 연결 기획 및 매니징

• 개발 문서 및 사내 프로덕트 문서 작성

• MySQL을 이용해 데이터 추출, Tableau를 활용해 데이터 도식화 및 분석

  • 데이터 분석을 통해 인기 있는 여름 시즌 팔뚝 지방분해 주사 아이템 확인

  • 관련한 숏폼 영상 2개 직접 제작해 2억 매출 달성

• 프로모션 타임 세일 페이지 기획 및 자사 메인 홈페이지에 노출

• CRM 운영(LMS, 앱 푸시, 카카오 플러스 친구)

• 디스플레이 광고 ROAS 중심 운영(페이스북, 카카오톡, 틱톡 등)

• 광고 소재 제작

• Github Url: https://github.com/woongminKi/project-cozy-client

• 1줄 요약: 주식 모의 거래소처럼 가상 화폐 거래 경험이 없는 초보자를 위해 가상 포인트로 모의 투자 연습할 수 있는
  모의거래소 웹어플리케이션.

• 기술: React, Redux, Redux-Saga, Redux-toolkit, Styled-Component, Node.js, Express, Mongoose, WebSocket, CI/CD, Nginx

• https에서 Websocket 프로토콜 통신 가능하도록 Nginx 환경 세팅

• 코인 시세에 따른 매수, 매도 기능, 코인별 차트 시각화

• Redux-Saga로 비동기 통신(WebSocket) 로직 작성 및 액션 함수 관심사 분리

• Github Action을 활용한 CI/CD 세팅

• Github Url: https://github.com/woongminKi/Client_New_Dino_Run

• 1줄 요약: 인터넷 연결이 안 됐을 때 크롬에서 할 수 있는 T-Rex 공룡 게임을 온라인화 했으며, 안면 인식 기능으로 나의 감정 분석을 해 캐릭터가 점프하는 러닝 게임

• 기술 : React, Redux, Redux-Saga, Socket.io-client, Face-api, Node.js, Express, Mongoose, Socket.io, JWT, AWS EC2

• Face-api.js로 안면 인식과 감정 분석으로 일정 점수 이상 시 캐릭터 점프 기능

• 카카오 OAuth를 사용해 로그인 기능 구현 및 JWT 방식(Access Token, Refresh Token)으로 보안성, 안전성 향상

• Socket.io, Redux-Saga를 이용해 양방향 실시간 게임 상태 및 업데이트 기능 구현(방 생성, 유저 참여, 게임 점수 상태 실시간 확인)

• AWS EC2로 서버 환경 구축, 배포 및 PM2를 이용한 백그라운드 서버 관리