미리보기

노코드 웹사이터 빌더 인턴 프로젝트의 프론트엔드 개발자로서 참여했습니다.
해당 인턴 프로젝트 간, ci / cd 환경 구축 및 jira를 통한 애자일 학습 등 프로그래밍 외적으로도 경험을 많이 했습니다.

프로젝트

1. 웹 에디터

   1. 실제 브라우저에서 렌더링 요소를 보여주기 위해 iframe으로 에디터 구성

2. 웹 크리에이터 / 뷰어

   1. middleware에서 wildcard url로 호스팅 로직 구성

개발 프로젝트 소개

1. Socket을 이용한 다수의 편집자 편집 기능

2. 커스텀 drag event handler를 통한 웹사이트 편집 경험 향상

3. middleware를 통한 퍼블리싱 된 웹사이트 라우팅 및 데이터 fetching

스토어 서비스
Unity를 이용한 게임 개발을 통해 스토어 내 입점 / 검수/ 출시 프로세스 검증.
해당 검증을 통해 전사 대상 Stoveship(사내 컨퍼런스)을 통해 당해 KPI 점검.

1. 스토어 서비스 개편

2. 마이프로필 / 창작자 서비스 런칭
   profile / creator

3. 스튜디오 창작자 입점
   https://studio.onstove.com

4. 스토브앱v3 웹뷰 서비스 구축

   1. 웹 인증 -> 모바일 인증 전환 프로세스 구축

      1. 기존 웹과 앱의 인증 프로세스 호환성을 맞추고 전환 가능케 서비스 로직 수정

   2. 전 서비스 GNB내 배너 컴포넌트 노출 구축

5. 운영 및 개선 업무

스토어 서비스를 만들면서 다양한 국가 / 언어 별 노출 기준에 맞춰 개발하는 경험을 얻을 수 있었습니다

입점사 별 커스텀 가능한 게임 상세 페이지 구축을 위해 인턴 프로젝트에서 수행하였던 노코드 웹사이트 빌더의 경험을 빌렸습니다. 다양한 컴포넌트 제작으로 다양성을 주어 게임 색깔에 맞는 상세 페이지를 제공할 수 있었습니다.

변동 가능성이 큰 "가격"을 노출하는 서비스이다 보니 다양한 요소 및 api를 조합한 서비스 운영

1. 스토어 서비스 내 SSR 전환

2. Cloudfront 내 캐시키 조합을 통한 캐시 히트율 개선

3. 불필요한 api 호출 전수 조사 및 개선

   1. 커뮤니티 호출 api 개선

      1. 기존 시간 복잡도 O(n)에서 O(1)로 호출 리소스 절감

기존 CSR 방식이던 스토어 서비스를 SSR을 섞는 방식으로 전환하는 프로젝트에 참여했습니다

캐싱 및 SSR 적용이 가능한 컴포넌트를 선별하였고 이를 토대로 작업하며 스토어 서비스 진입 경험 개선에 기여했습니다

1. 프로젝트 기획 및 동선 결정 초기 단계부터 참여

2. 프로젝트 개발

   • 창작자 설정 페이지 개발

   • 컴포넌트 다수 개발

   • 개발자 BVT 작성을 통한 품질 개선

3. 라이브 배포 후 운영 업무

스토브 앱 v3 내 스토어 웹사이트 웹뷰 게시 (2024.09 기준 앱 릴리즈 완료)

1. Js-bridge를 통해 기존 웹토큰 인증 프로세스 모바일토큰 인증 프로세스로 대체

2. GNB 내 배너 컴포넌트로 인한 설치 유도 동선 추가

   1. CDN 업로드를 통해 배포 필요 없는 배너 컨텐츠 변경

   2. deep-link 를 통해 웹 <-> 앱 전환 간 유저 경험 향상

3. 크로스플랫폼 내 서비스를 고려하여 반응형 테스트

   1. 모바일 웹뷰 디버깅 경험이 없는 조직 상대로 가이드 수행

최초로 스토어 웹 서비스를 앱 내 웹뷰로 제공하는 프로젝트를 팀 내에서 리딩하였습니다.

Scheme 통신 및 Bridge 통신에 대한 이해를 쌓을 수 있었고 이를 서비스 로직 내 rebind하며 기존 웹 서비스에 영향 없이 작업할 수 있었습니다

GNB 내 앱 설치 유도 배너 작업 시에는 앱과 DeepLink 연동을 통해 Scheme path 기준으로 배너 클릭 위치 별 행동을 정의하였습니다. 이로 인해 사용자로 하여금 현재 보고 있는 위치를 앱(인앱 뷰 or 웹뷰)로 제공함으로써 편의성을 개선했습니다

1. 사내 Swiper 라이브러리 개선

   • legacy한 swiper 버전인 v.4의 loop 옵션 문제점 서비스에 맞게 커스텀하여 해소

   • https://github.com/nolimits4web/swiper/issues/7270

2. 다국어 적용

   • CDN을 통해 11개 언어의 다국어 파일 관리

   • properties를 통해 central dogma(형상관리 CDN)를 이용한 형상 관리 적용

3. 대량 DLC 대응

   • 대량 DLC 입점 게임들에 대한 UX 개선 및 Infinite Scroll 적용

개발자들의 사이드프로젝트를 등록하고 전시할 수 있는 공간.

프로젝트 당 유의미한 실사용자를 높이기 위해 서비스 출시 준비중

1. Server / Client 사이드 react-query 서비스 구축

   
   서버사이드 환경에서 tanstack-query 사용 위한 커스텀 hydrate 훅 생성함으로써 서버사이드와 클라이언트 사이드에서 같은 api에 대한 중복 호출 리소스를 확인할 수 있었습니다

2. 프로젝트 단위 디자인 시스템 구축 -> 범용성 높고 재생산성 효율 증가

3. zod와 react-hook-form 사용한 프로젝트 등록 프로세스 로직 구축

사용 기술 스택: Next.js / tanstack-query

1. SW 개발 교육
2. 네트워크 기초 및 심화 학습
3. AWS IAM 관리 웹 프로젝트 수행

1. 중앙대학교 UMC 운영진 업무 수행
2. UMC node.js 파트장

포스트 코로나를 대비해 코로나 시대 대학생들 간 벌어진 정보의 격차 해소를 목표로 진행된 프로젝트입니다.

해당 프로젝트에서 프론트엔드 개발자로서 전체 서비스에 기여했습니다.

• Repository