원지은

Front-end Developer
image

안녕하세요, 프론트엔드 개발자 원지은 입니다. 좋은 UX, DX 제공할 때 보람을 느낍니다. 레거시 코드를 리펙터링 하는 것에 관심이 있고, 제품에 맞는 디자인 패턴을 적용하여 유지보수성을 높이는 것을 중요하게 생각합니다. 팀 내 협업 시 시각적인 정보를 효과적으로 전달하기 위해 다이어그램을 적극적으로 활용하여 소통하는 것을 선호합니다.

Work Experiences

라인플러스

2022.06 - Present
  • NOW. Drops(나우드롭스), AVA(에이바) 서비스 및 CMS 개발
  • MessagingHub(메시징허브) 채팅, 챗봇 및 Admin 서비스 개발
  • Docker 파일 구성 및 Kubernetes 환경에 배포
  • Github Actions CI/CD 작업으로 DX 개선
  • New Relic을 이용한 APM, Browser 모니터링 및 로깅

켄싱턴월드(현 이랜드이츠)

2021.08 - 2022.05
  • Alignup(얼라인업) v2 개발
  • Nuxtjs Framework 프로젝트 설정
  • TypeScript 구축 및 마이그레이션
  • Token을 이용한 클라이언트 인증 및 권한 처리
  • AWS S3, CloudFront 정적 웹 호스팅 환경 구성
  • Github Actions 배포 자동화 구축

브레이브모바일

2019.08 - 2021.07
  • 숨고 서비스, 백오피스 개발 및 유지보수
  • Node.js 기반 Server-side Rendering
  • Viewport에 맞는 반응형 웹 개발
  • 크로스 브라우징 (IE11, Chrome, Safari, Mobile browser)
  • 페어코딩, 코드리뷰, 기술리뷰 경험

Projects

MessagingHub Inquiry Chat (메시징허브 인쿼리 챗)

2025.04 - Present / 기여도 : 80%

⚙️ 기술 스택: Nextjs, Typescript, Tailwindcss, Zustand, Turborepo, Vite, react-web-socket, Docker, K8s, Github Actions, New Relic, next-i18n

  • MessageChannel API를 이용한 메시지 통신 규약 구현
  • Monorepo 아키텍처 구성하여 Core 로직과 공통 UI 패키지화
  • Barrel 파일 제거 및 sideEffect 옵션 설정으로 Treeshaking 최적화하여 번들 사이즈 감소
  • Inquiry Chat Test Page 구축하여 QA 안정성 강화 및 포트폴리오 페이지 구성
  • 다국어 지원을 위한 next-i18n 적용
  • 채팅 읽음 처리, 최근 메시지로 이동, 페이징, 채팅 메시지 팝업, 이미지 메시지 전송 등 기능 구현

MessagingHub ChatBot (메시징허브 챗봇)

2024.01 - 2025.04 / 기여도 : 60%

⚙️ 기술 스택: Nextjs, Typescript, Tailwindcss, Zustand, REST API, react-web-socket, Docker, K8s

  • WebSocket 프로토콜로 실시간 메시지 통신 및 재연결 로직 구현
  • iframe/webview를 통한 원활한 채팅 서비스 연동을 위해 가이드 문서 작성 및 온보딩 지원
  • Intersection Observer API를 이용한 채팅방 Infinity Scroll 구현
  • 비동기 처리 및 상태 관리를 위한 Zustand 활용

MessagingHub Admin (메시징허브 어드민)

2023.09 - 2023.12 / 기여도 : 40%

⚙️ 기술 스택: Nextjs, Typescript, Ant Design, Zustand, REST API, Axios, Tanstack Query, Jest, React Testing Library, Mock Service Worker, Docker, K8s

  • Page Router 기반의 Nextjs로 프로젝트 구축 및 FSD 폴더 구조 설계
  • React Testing Library와 MSW를 이용한 테스트 코드 작성으로 서비스 안정성을 높임
  • reactflow 라이브러리 사용하여 캔버스 상에 Node, Edge를 조작하는 챗봇 시나리오 편집 페이지 개발
  • MessageChannel API를 이용한 메시징 허브 챗봇 시나리오의 미리보기 팝업 개발

AVA Market (에이바 마켓)

2023.01 - 2023.08 / 기여도 : 20%

⚙️ 기술 스택: Nextjs, Typescript, GraphQL, Apollo Client, Mock Service Worker, Sentry, Docker, K8s

  • NFT 마켓플레이스 서비스의 Nextjs 기반 FE 개발
  • 아티스트에 따른 컨텐츠 구조 변경을 동적 컴포넌트로 설계
  • SRP, DRY 원칙에 따라 가독성이 있게 리팩터링
  • CMS SDUI(Server Driven UI) PoC 구성 및 기술 공유

NOW. Drops (나우드롭스)

2022.08 - 2022.12 / 기여도 : 30%

⚙️ 기술 스택: React, Typescript

  • Teaser(티저) 페이지의 배경 이미지를 연속적으로 노출하는 시퀀스 스크롤 애니메이션 개발
  • Caniuse 기반 iOS, Safari 지원 브라우저 버전 확인 및 크로스 브라우징 이슈 대응
  • Safari에서 깜박임을 발생시키는 복잡한 SVG 필터를 단순한 구조로 대체

Alignup (얼라인업)

2021.08 - 2022.06 / 기여도 : 60%

⚙️ 기술 스택: Nuxtjs, Typescript, AWS S3, CloudFront, REST API, Axios

  • Token 기반 OAuth2 인증 방식의 클라이언트 측 인증 및 권한 처리
  • access_token은 vuex store에 관리, refresh_token는 브라우저 쿠키에 저장하고 Secure, SameSite 설정 추가
  • Safari 브라우저의 로그인 페이지에서 CSS의 gradient, shadow, filter 등의 그리기 속성 제거하는 렌더링 성능 개선 작업으로 주 스레드 Paint 비율을 85.5% -> 12.8% 낮춤
  • Typescript 컴파일러 옵션 설정 및 마이그레이션

Soomgo (숨고)

2019.08 - 2021.07 / 기여도 : 20%

⚙️ 기술 스택: Typescript, Vuejs, Bootstrap Vue, React, redux-toolkit, material-UI

  • django + vue template 레거시 페이지 마이그레이션
  • 아임포트 결제 모듈 연동 및 숨고 캐시 결제 플로우 개발 개발
  • 채팅방에서 거래할 수 있는 숨고페이 개발
  • 백오피스 개발 및 유지보수