• Phone 010-2241-2679

• E-mail [email protected]

• GitHub https://github.com/Gi-Youn-Oh

• Blog https://giyoun-blog.vercel.app

✔️ [성장] 발전을 위해 끊임없이 노력하는 끈기가 있습니다.

맡은 업무에서 최고가 되겠다는 목표로, 스스로 학습하고 기술 블로그를 통해 지식을 나누며 꾸준히 성장하고 있습니다. 다양한 직종에서 단기간에 높은 성과를 인정받아 승진과 경쟁력 있는 보수를 쌓아왔으며, 회사에 필연적인 존재가 되겠다는 마인드로 항상 노력합니다. 고립된 환경 속에서도 개인에서 나아가 팀, 회사에 도움이 된다면 절대 포기하지 않습니다.

✔️ [소통] 효율적인 대화를 이끌어냅니다.

개발에서 의사소통은 매우 중요한 요소라 생각합니다. 저는 효율적인 대화를 이끌어내어 협업의 질을 높이 는 데 집중합니다. 과거 쇼핑몰 운영 시 다수의 도매업체 사장님들과의 미팅을 통해 효과적인 커뮤니케이션의 중요성을 깨달았으며, 영어 강사로서 학생들에게 지식을 전달하고 발표 전 꼼꼼히 자료를 준비하여 팀원들에게 긍정적인 평가를 받았습니다. 이러한 경험을 바탕으로, 개발 팀 내에서 명확하고 효율적인 소통을 통해 목표 달성을 지원하겠습니다.

Work Experience

벽촌 ( 23. 7 - 24. 10 )

| SLP Placement Test ( 24. 8 - 24. 10 )

서강교육그룹 학생 레벨 테스트 및 관리 웹 서비스

역할

✓ 문제 에디터, 시험지 뷰어 프론트 개발

사용 언어 및 기술

✓ 언어 : JavaScript ✓ 코어 : React.js, Vue.js

✓ 상태관리 : Zustand, Pinia ✓ 기타 : Tailwind, React-router-dom

기여도 ( :100프로: main :50프로: partial :0프로: no contribution )

경험 및 성과

✔️ 다중 프론트엔드 프로젝트 통합 배포, 라우팅

• 배경 : 외주 요청에 따라 단기간 내 서비스 완성을 위해 4명의 프론트 개발자 투입 및 기존 Vue.js 기 반 에디터 코드를 활용 요구, 개별 서비스 개발로 인해 배포 시 네트워크 복잡성, 환경 설정 불일치, 유지보수 부담 증가의 문제 발생.
• 액션 : React, Vue기반 프론트 3개 앱과 Fastify 백엔드를 개별 컨테이너로 감싸 NginX로 라우팅하여 통합 배포 제안.
• 결과 : 통합 배포로 성능 및 유지보수 효율성 향상.

✔️ 음원 자동 재생 및 크로스 브라우징 이슈 대처

• 배경 : 서비스 특성 상 음원 자동 재생과 PC, Tablet 환경에서의 크로스 브라우징 호환 요구.
• 액션 : 브라우저 정책을 우회하여 초기 음원을 muted 상태로 빈 buffer와 함께 재생하여 자동 재생 구현.
• 시행착오 : PC에서는 안정적이었으나, 특히 IOS 기반 Tablet에서 자동 재생이 원활하지 않음.
• 대처 : 기획 및 디자인팀과 협의하여 클릭 이벤트가 선행되도록 서비스 플로우를 수정하고, 오디오 관련 unlock 동기화 문제로 발생하는 에러를 callback을 통해 처리하여 안정적으로 재생되도록 구현.
• 결과 : 모든 PC 및 Tablet 환경에서 안정적인 음원 자동 재생 구현.

✔️ 데이터 동기화 및 상태 관리

• 배경 : 대시보드, 에디터, 뷰어로 구성된 React와 Vue기반의 앱을 하나의 도메인에 통합하여, 각 서비스 간 데이터 동기화 및 새로 고침 시 데이터 유지, 시험지 뷰어에서 각 문제집 별 창을 열어 데이터를 관리할 수 있어야 했음.
• 액션 : LocalStorage를 사용해 데이터 지속성을 보장하고, postMessage로 창 간 데이터를 동기화. React-router-dom의 Loader를 활용해 Fetch → Render 방식으로 사용자 경험을 개선. 각 문제집별로 동적으로 스토어를 생성하고 관리하여 데이터 무결성을 유지하며, 불필요한 데이터는 삭제하여 리소스를 최적화.
• 결과 : 사용자 경험을 개선하고, 데이터 동기화 효율성을 높였으며, 서버 부하를 줄이고 리소스 낭비를 최소화함.

| 법조인대관 ( 24. 5 - 24. 6 )

국내 법조인 정보 데이터베이스 검색 서비스

역할

✓ 메인 검색 서비스 UI, UX 개편, 마이그레이션 준비

사용 언어 및 기술

✓ 언어 : TypeScript ✓ 코어 : React.js, Next.js

✓ 상태관리 : Redux ✓ 기타 : Emotion

기여도 ( :100프로: main :50프로: partial :0프로: no contribution )

경험 및 성과

✔️ 사용자의 경험 개선을 위한 UX 개편

• 배경: 기존 메인 페이지에서는 검색을 위해 모달을 열고 옵션을 개별적으로 선택한 후 확인을 클릭해야 했으며, 선택된 옵션을 취소하려면 반복적으로 다른 옵션을 선택 후 적용하는 방식으로 사용자에게 피로감을 주는 인터페이스였음.
• 액션: 메인 페이지에서 바로 검색이 가능하도록 구조를 개편하고, 옵션을 한 화면에서 즉시 선택할 수 있도록 변경. 검색 결과 페이지에서는 태그 기반으로 필터링을 표시하고, 사용자가 태그를 삭제할 때마다 바로 실시간으로 검색 결과가 갱신되도록 역매핑 기능을 구현.
• 결과: 사용자 피로감을 크게 감소시키고, 검색 흐름을 간소화하여 사용자가 더 직관적으로 빠르게 검색할 수 있도록 개선. 실시간 검색 결과 갱신을 통해 사용자가 보다 효율적으로 원하는 결과를 찾을 수 있도록 사용자 경험을 향상.

✔️ Next.js 마이그레이션 및 서비스 개선

• 배경: 기존 Page Router 및 Redux 기반 구조에서는 페이지 렌더링 시마다 모든 데이터를 매번 fetch해야 했고, 그로 인해 렌더링 속도가 느려지고 불필요한 API 요청으로 서버 과부하가 발생. 이를 개선하고자 주도적으로 마이그레이션을 제안.
• 액션:
  1. Next.js App Router로 마이그레이션하고, React Server Components(RSC)를 활용하여 서버에서 렌더링된 컴포넌트를 클라이언트로 전달. 이를 통해 페이지 로딩 시 필요한 데이터만 별도로 fetch해 JS 번들 크기를 줄임.
  2. Zustand를 도입하여 상태 관리 방식을 변경, 클라이언트와 서버 상태를 분리하고 Next.js 확장된 Fetch API를 활용, 정적 데이터를 캐싱하여 불필요한 API 요청을 최소화.
  3. vanilla-extract로 스타일 관리 라이브러리를 변경하여 런타임에서의 번들 크기를 줄이고, 성능을 최적화.
• 결과:
  1. JS 번들 크기 감소와 렌더링 속도 개선.
  2. 서버 부하 감소 및 불필요한 API 요청 최소화.
  3. 데이터 캐싱과 클라이언트-서버 상태 분리로 효율적인 리소스 관리.
  4. 성능 향상, 페이지 로딩 속도 개선, 확장성 및 유지보수 용이성 향상.
• 기타: 외주 계약 문제로 중단.

| 대구 지역혁신인재양성 플랫폼 ( 23. 11 - 24. 1 )

대구지역 대학정보 통합 플랫폼

역할

✓ 모집요강 pdf, 시설예약 서비스 개발

사용 언어 및 기술

✓ 언어 : TypeScript ✓ 코어 : React.js, Next.js

✓ 상태관리 : Recoil ✓ 기타 : Kakao-map-sdk

기여도 ( :100프로: main :50프로: partial :0프로: no contribution )

경험 및 성과

✔️ 예약 시스템의 상태 관리 개선 및 런타임 에러 처리

• 배경: 예약 시스템에서 여러 페이지에 걸쳐 분산된 state를 서버로 전송해야 했는데, 개별 state로 관리하던 방식은 코드의 복잡성을 높이고 데이터 통합 시 오류가 발생하기 쉬웠음.
• 액션: useFormState, ServerAction을 사용하여 여러 페이지의 상태를 통합 관리하여 예약 데이터를 일관성 있게 처리. zod를 활용해 예약 데이터의 스키마를 정의하고, 런타임 에러를 사전에 검증하여 오류를 방지.
• 결과: 데이터 일관성이 개선되어 상태 관리가 간소화되었고, 런타임 에러 발생률이 감소하여 안정성이 향상됨.

| HDC 현대산업개발 ( 23. 8 - 23. 10 / 24. 2 - 24. 3 )

전국 공사현장 관리 대시보드 및 cctv 실시간 스트리밍

역할

✓ 대시보드 및 CCTV 스트리밍 프론트 개발

사용 언어 및 기술

✓ 언어 : JavaScript ✓ 코어 : React.js

✓ 상태관리 : Recoil, ReactQuery ✓ 기타 : StyledComponent, WebSocket

기여도 ( :100프로: main :50프로: partial :0프로: no contribution )

경험 및 성과

✔️ React Query 도입으로 API 통신 최적화 및 주기적 업데이트, Client-Server 상태 분리

• 배경: 기존에는 client와 server 상태가 통합되어 관리되면서, 반복적이고 주기적인 API 호출에서 불필요한 요청이 발생하고 상태 관리 복잡성이 증가했습니다.
• 액션: React Query를 도입하여 server 상태를 담당하도록 분리하여 관리하고, 캐싱과 주기적 업데이트가 자동으로 이루어지도록 개선했습니다. Client 상태는 Recoil을 통해 독립적으로 관리하도록 설정했습니다.
• 결과: Client-Server 상태 분리를 통해 데이터 일관성을 높이고 상태 관리가 용이해졌으며, 불필요한 API 호출이 줄어들어 애플리케이션 성능과 자원 효율성이 크게 향상되었습니다.

✔️ Naver Map을 활용한 마커 및 클러스터 생성, 클릭 시 모달 표시 구현

• 배경: 건설 현장 데이터에 따라 좌표에 마커와 클러스터를 생성하고, 사용자가 클릭할 때 관련 정보를 표시하는 모달이 필요했습니다.
• 액션: Naver Map API를 사용하여 건설 현장 데이터를 기반으로 좌표에 마커와 클러스터를 생성하고, 각 마커와 클러스터 클릭 시 커스텀 이벤트를 등록했습니다. 이벤트를 통해 클릭된 위치의 좌표를 확인하고, 해당 위치에 맞는 정보를 모달로 표시하도록 구현했습니다.
• 결과: 사용자는 직관적으로 마커와 클러스터를 클릭하여 관련 정보를 쉽게 확인할 수 있게 되었으며, 데이터에 따라 동적으로 모달을 표시하여 사용자 경험을 향상시켰습니다.

✔️ 현장, 화면 분할 별 여러 대의 CCTV 스트리밍 메모리 최적화 및 안정화

• 배경: 여러 대의 CCTV를 WebSocket을 통해 실시간 스트리밍해야 하는 환경에서, 화면 모드 변경 및 분할에 따른 안정적인 연결 유지가 요구되었습니다.
• 액션: 각 소켓의 메모리 관리를 위해 스트리밍 모듈을 분리하여 독립적으로 처리하도록 구현하였습니다.
• 시행착오: 화면 분할 모드 변경 시 WebSocket 중복 연결 및 버퍼 누적으로 인한 메모리 누수, 불완전한 실시간 버퍼 데이터로 인한 연결 장애, Safari 환경에서 MSE 미지원 문제 등이 발생했습니다.
• 대처: 화면 분할별로 CCTV를 그룹화하여 포커싱된 화면에만 WebSocket 연결을 유지하고, 나머지 화면은 연결을 해제하여 메모리 최적화를 이루었습니다. 또한, 콜백 이벤트를 등록하여 주기적으로 버퍼를 확인하여 관리하고, 불완전한 데이터 처리를 위해 타이머를 설정하여 오류 시 자동 재연결을 진행했습니다. 사용자의 환경에 맞춰 MSE와 HLS 모듈을 분리하여 각각 지원하였습니다.
• 결과: 버퍼 크기 관리 및 안정적인 재생을 통해 CCTV 스트리밍 시스템의 안정성을 대폭 향상시켰습니다. WebSocket 연결을 보이는 화면에만 제한하여 메모리 누수를 방지하고, 시스템 성능과 안정성을 크게 개선하였습니다.

Other Work Experience

SearchAgain ( 20. 10 - 22. 1 )

• CEO

애즈클로 ( 18. 1 - 19. 11 )

• 배송 부팀장, MD

삼성에듀학원 ( 16. 8 - 18. 1 )

• 영어강사