안녕하세요, 저는 오혜성입니다.

hyesungoh

저는 인간적 성장을 통해 멋진 사람 그리고 좋은 아버지가 되는 것이 목표입니다.
'프로'다움은 책임감에서 나오며,
일에 대한 책임감을 통해 인간적 성장을 이룰 수 있다고 믿습니다.

링크

  • Github: github.com/hyesungoh
  • Blog: www.hyesungoh.xyz
  • LinkedIn: www.linkedin.com/in/hyesungoh414
  • Email: haesungoh414@gmail.com

경력

F-Lab & Company

2023.06 ~ 프론트엔드 개발자

24년 3월부터 사내 1인 프론트엔드 개발자로써, 클라이언트 개발을 전담하고 있습니다.

프론트엔드 챕터

프론트엔드 개발자의 생산성과 환경을 위해 노력했습니다.
  • PR의 작업 범위, diff 크기, 제목을 이용해 라벨링을 자동화해 PR의 시인성을 높이고, 개발자의 부담을 덜 수 있도록 노력했습니다.
  • 직렬적으로 동작하던 CI를 의존 관계에 따라 병렬적으로 동작하도록 변경해 CI 시간을 절반으로 단축시켜 개발자의 생산성을 높였습니다.
    관련해 사내 블로그에 기고한 글은 다음 링크에서 확인하실 수 있습니다.
  • stand alone 빌드 적용 및 배포 과정을 개선해 기존 50분, 14분 소요되던 과정을 8분으로 단축시켰습니다.
  • Vitest, Playwright를 이용해 테스트 환경을 구축하고 팀 내에 테스트 문화 도입을 위해 선행하고 있습니다.
  • 매주 진행하는 프론트엔드 챕터 모임에서 팀원의 성장을 위해 새롭게 알게 된 내용 및 도구들을 가장 활발히 공유하며, 성장에 유리한 환경을 만들기 위해 노력했습니다.
Yarn BerryYarn WorkspacesVitestReact Testing LibraryCodecovPlaywrightGithub actionsHusky
근거를 기반으로 홈페이지를 유지보수합니다.
  • 섹션과 페이지 별 머물렀던 시간과 스크롤 정도를 기록할 수 있는 트래킹 시스템을 선언적으로 구축하도록 노력했습니다.
  • 인증 정보를 포함해, 초기 렌더링에 필요한 값들을 dehydrate, 초기 전역 상태에 저장해 사용자 경험을 개선했습니다.
  • 블로그 개별 페이지의 SSR시 컨텐츠 내용을 조회하도록 수정해 라이트하우스 기준 성능 점수 32점 상승 및 처음으로 그려지는 HTML에 데이터를 노출해 SEO에 이점이 있도록 노력했습니다.
  • 프론트엔드 코스의 그로스 작업에 참여해 기획 및 개발을 주도했으며 AB 테스트를 통해 효과를 검증해나가 전환률을 3% 상승시키는 성과를 거두었습니다.
  • Sentry를 부착해 에러 모니터링 환경을 구축하였습니다.
Next.jsTypeScriptYarn BerryYarn WorkspacesEmotionRecoilTanStack/React QueryFramer-motionSentry

F-Lab Design System

TypeScriptReactEmotionStorybookChromatic

LMS

멘티님들께서 학습 시에 사용하는 Learning Management System입니다.
  • 홈페이지의 하위 디렉토리에 있던 LMS를 별도의 도메인으로 분리하는 작업을 전담하였습니다.
    미들웨어를 사용해 이미 사용되고 있는 링크도 동작할 수 있도록 했습니다.
  • 홈페이지의 인증 정보를 공유할 수 있도록 저장 공간을 변경하고, 로직을 추가하였습니다.
  • 고객이 느끼는 가치를 높이기 위해 주도적으로 인터랙션을 추가해 유려하게 보일 수 있도록 노력했습니다.
TypeScriptNext.jsEmotionReact Hook Form

백오피스

운영에 소모되는 자원을 줄이기 위한 백오피스 서비스입니다.
  • 바로 옆의 사용자 행동을 관찰하여 form 입력 값 유지, enter 키 대응 등 사용자 경험을 증진시킬 수 있도록 주도적으로 나섰습니다.
TypeScriptNext.jsEmotionReact Hook FormAntd

멘토 페이지

F-Lab의 멘토님들께서 사용하실 수 있는 서비스입니다.
  • 대시보드의 각 섹션을 병렬적으로 처리하며, 스켈레톤을 적용해 사용자 경험을 개선했습니다.
TypeScriptNext.jsEmotionReact Hook FormAntd

조직

2023.06 ~ 개발 이외에 회사에 기여할 수 있는 것을 찾아 하였습니다.
  • 정기적으로 만들었던 기능의 지표를 보며, 메이커들에게 효능감을 주고 앞으로의 방향성을 생각할 수 있는 시간을 만들어 운영하고 있습니다.
  • 회사의 인지도를 위해 연합 동아리들과 직접 연락해 계약을 체결하고 필요한 지원을 제공하고 있습니다.
  • 해커톤 행사를 주도적으로 기획하고 운영한 경험이 있습니다.
  • 컬쳐핏 인터뷰를 리드하고 있습니다.
Yarn BerryYarn WorkspacesVitestReact Testing LibraryCodecovPlaywrightGithub actionsHusky

사이드 프로젝트

git-goods

2024.06 ~

오버엔지니어링을 '지향'하며, github와 관련된 서비스를 만드는 그룹입니다.

2024.06 ~ 커밋을 통해 동물을 키우고, 동물이 포함된 이미지를 제공하는 서비스입니다.
  • Zod의 타입 검증과 Axios method를 추상화한 유틸을 개발해 레이어 간 타입 검증을 쉽게 할 수 있도록 하였습니다.
  • 모노레포 패키지 분리 전략을 주도하였습니다.
  • 사용자의 목소리를 적극 반영할 수 있는 환경을 만들기 위해 노력했습니다.
Next.jsTypeScriptTurborepoTanStack/React QueryPNPMpanda-cssJotaiFramer-motionVercelZod

무한도전

2023.12 ~

개발 서적 스터디 그룹을 운영하고 있습니다.

2023.12 ~
  • 리액트, 함수형 프로그래밍과 같은 기술에 대한 서적부터 소프트 스킬에 대한 서적까지 함께 읽으며 스터디를 운영하고 있습니다.
  • 만족도 조사, 회고를 통해 더 효과적으로 공부할 수 있는 스터디 그룹이 될 수 있도록 노력하고 있습니다.

디프만

2022.03 ~ 2023.08개발자 및 운영진

직장인부터 학생까지의 디자이너와 개발자들이 만나 서비스 런칭을 목표로 하는 연합 동아리입니다.

2023.4 ~ 동료의 익명 피드백을 모아 직무 강점을 찾는 웹 서비스입니다.
  • 서비스를 이용한 제 커리어 명함은 다음 링크에서 확인하실 수 있습니다.
  • 23년 7월 기준 일일 최대 사용자 540명 대를 기록하고 있습니다.
  • 제가 작성한 PR은 다음 링크에서 확인할 수 있습니다.
  • 리뷰와 커리어 명함 페이지에 SSR을 적용하고, 오픈그래프 태그를 개별 사용자에 맞게 그려주어 SNS 공유를 효과적으로 할 수 있도록 하였습니다.
  • 사용자별 동적 이미지를 서버 사이드에서 만들어 TTFB가 오래 걸리는 이슈를, API Route와 동적으로 요청하는 방법으로 변경해 830ms에서 200ms로 개선하였습니다.
Next.jsTypeScriptYarn BerryEmotionStylelintFramer-motionTanStack/React QueryStorybookChromaticVitestReact Testing LibraryCodecovPlaywrightGithub actionsVercelCodechecksCodeQLHuskyGAHotjarMixpanelSentry
2022.10 ~ 소지품 리마인드를 위한 웹뷰 기반 모바일 서비스입니다.
Next.jsReact-NativeTypeScriptYarn BerryEmotionFramer-motionRecoilTanStack/React QueryJestReact Testing LibraryCodecovPlaywrightGithub actionsCodeQLHuskyGAHotjarMixpanelSentryCloudflare Pages
2022.08 ~ 2023.04디프만의 공식 랜딩 페이지입니다.
  • 깊은 인상을 남기며 정보를 효과적으로 전달하기 위해 인터랙티브하게 만들고자 노력하였습니다.
  • 이미지 형식 변환, next/image의 priority, placeholder 옵션 등을 통해 FCP를 13.8초, TTI를 12초, LCP를 11.9초 감소시켰습니다.
  • 클라이언트 사이드에서 다이내믹 라우팅되던 페이지들에 SSG를 적용해 TTI를 0.4초, LCP를 1.5초 감소시켰습니다.
  • GA와 Hotjar를 도입해 사용자 경험과 트래픽을 추적하였습니다.
  • Google Search Console을 도입해 모든 페이지의 색인이 생성되도록 해, 더욱 많은 검색에서 디프만이 노출되도록 하였습니다.
  • 관련 개발기는 다음 링크에서 확인할 수 있습니다.
Next.jsTypeScriptEmotionFramer-motionGithub actionsnext-sitemapGAHotjarHuskyVercel
2022.03 ~ 영감을 기록하는 모든 이들을 위한 아카이빙 서비스이며, 웹뷰 기반 모바일 플랫폼으로 제공됩니다.
  • 22년 7월 기준 앱 스토어 생산성 카테고리 113위를 달성했었습니다.
  • 23년 7월 기준 MAU 200명대를 기록하고 있습니다.
  • 제가 작성한 PR은 다음 링크에서 확인할 수 있습니다.
  • 지표를 근거로 회원가입 플로우의 리뉴얼을 리드해, 회원가입 시 이탈률을 30% 감소시켰습니다.
  • 수집한 지표를 Mixpanel을 통해 시각화 및 분석하여 운영에 반영하고 있습니다.
  • 이미지 저장 기능 개발기는 다음 링크에서 확인할 수 있습니다.
Next.jsReact-NativeTypeScriptYarn BerryEmotionFramer-motionTanStack/React QueryRecoilJestReact Testing LibraryCodecovCypressGithub actionsCodeQLGAHotjarMixpanelSentryHuskyCloudflare Pages

블로그, 이력서 템플릿

2022.03 ~ 오픈소스 프로젝트

2022.03 ~ 블로그와 이력서를 같은 스타일로 관리하고자 개발하였습니다.
  • Next.js의 'getStaticProps', 'getStaticPaths'를 이용해 SSG로써 구현하였습니다.
  • Unified, Rehype를 이용해 Markdown을 컴파일하였습니다.
  • robots.txt, sitemap.xml과 같은 정적 파일 생성을 자동화하였습니다.
  • 블로그와 이력서 간 동일한 설정, 컴포넌트를 재사용하기 위해 Turborepo를 사용해 모노레포를 구성하였습니다.
  • 회고는 다음 링크에서 확인하실 수 있습니다.
Next.jsTypeScriptNextUITurborepoKBarGAHotjarVercelGithub actionsJestReact Testing LibraryCypress
2022.06 ~ comet-land 프로젝트를 더욱 쉽게 시작할 수 있는 CLI 어플리케이션입니다.
  • 동적이며 아름답게 보여짐과 동시에 관리에 용이할 것이라 판단하여 React와 Ink를 사용하였습니다.
  • Shelljs를 이용해 git clone 후, fs 모듈을 이용해 파일을 수정하는 방법으로 개발하였습니다.
  • Github actions를 이용해 릴리즈시 NPM에 배포되도록 CD를 구축하였습니다.
  • 회고는 다음 링크에서 확인하실 수 있습니다.
ReactTypeScriptInkShelljsWebpackGithub actions

그 외 프로젝트

2023.09 ~ 2023.09카카오톡과 같은 인앱 브라우저에서 외부 브라우저를 열 수 있도록 도와주는 라이브러리입니다.
  • tsup을 이용해 ESM, CJS 형태로 빌드해 제공합니다.
Yarn BerryReacttsupEslintPrettier
2023.01 ~ 2023.02
  • 자주 사용하며 선호하는 Eslint와 Prettier 설정을 패키지화 하였습니다.
  • 깃허브 릴리즈 시 배포되도록 CD를 구성하였습니다.
Yarn BerryEslintPrettierRollupGithub actions
2021.04 ~

그 외 경험

Toss Frontend Accelerator

2024.07 ~ 2024.08

4주 동안 토스 프론트엔드 리드와 멘토-멘티의 관계를 맺어 학습하는 프로그램입니다.

  • 우수 수료생으로 선정되었습니다.
2024.08 ~ Contributor

빠른 성능과 작은 번들 사이즈를 자랑하는 JavaScript 유틸리티 라이브러리입니다.

2024.08not merged yet

오픈 소스 문서 기여

오픈 소스 및 생태계에 관심을 가지며, 간단한 문서 수정을 통해 기여한 경험이 있습니다.

2024.04Contributor

React transition 시 progress bar를 보여주는 오픈소스 프로젝트에 기여하였습니다.

Software Maestro Expert

2022.06 ~ 13기, 14기, 15기 Expert

연수생이 보다 개발에 몰입할 수 있도록 도움을 주는 활동에 참여해 후배 개발자 양성에 기여하고 있습니다.

2022.02Contributor

더미 데이터를 제공하는 오픈소스 프로젝트에 기여하였습니다.

2021.10Contributor

동영상 플레이어를 제공하는 오픈소스 프로젝트에 기여하였습니다.

2021.04Contributor

블로그 테마 오픈소스 프로젝트에 기여하였습니다.

기술

의사소통

  • 함께 일하고 싶은 사람은 신뢰에서 나온다고 믿으며, 이를 위해 빠른 실행력과 근거 기반의 의사소통을 위해 노력합니다.
  • 팀 내 공통된 목표가 원활한 의사소통과 높은 생산성을 만든다고 믿습니다.
  • 내가 모르는 것은 솔직하게 모른다고 말할 수 있는 용기를 위해 노력합니다.
  • 백문이 불여일견을 믿어, 다양한 도구와 방법으로 의사소통하는 것을 좋아합니다.

HTML/CSS

  • 의미있는 마크업을 작성하기 위해 노력합니다.
  • CSS 전처리기와 CSS in JS에 익숙합니다.
  • Zero Runtime CSS in JS 도구가 해결하고자 하는 문제를 알며, Vanilla Extract와 panda-css를 사용해본 경험이 있습니다.
  • 검색 엔진 최적화 경험과 Sitemap.xml, Robots.txt를 통해 네이버, 구글에서 검색되도록 지원해본 경험이 있습니다.

JavaScript

  • ES6 이후의 문법에 익숙합니다.
  • Vanilla JavaScript를 사용해 개인 프로젝트를 진행한 경험이 있습니다.

TypeScript

  • JavaScript보다 TypeScript 개발환경에 익숙합니다.
  • Type-Safe하게 개발하는 것을 지향합니다.
  • 유틸리티 타입, 제네릭, 서로소 타입 등을 이용해 타입을 좁히고, 정의하는 것에 익숙합니다.

비동기

  • Async Await 문법에 익숙합니다.
  • Data caching, revalidate를 이유로 Data fetching 라이브러리 TanStack/React Query, SWR을 사용한 경험이 있습니다.

React

  • 함수 컴포넌트와 Hooks를 사용하는 것에 익숙합니다.
  • Suspense와 Error Boundary를 사용해 선언적으로 코드를 작성하는 것을 좋아합니다.
  • 프레임워크로써 Next.js 환경을 선호합니다.
  • Next.js를 사용해 요구사항에 따라 적절한 렌더링 방법(CSR, SSR, SSG, ISR)을 선택할 수 있습니다.
  • Recoil과 Jotai를 이용해 전역 상태를 관리한 경험이 있습니다.

Test

  • Jest, Vitest 그리고 React Testing Library를 이용해 테스트 코드를 작성한 경험이 있습니다.
  • Cypress, Playwright을 이용해 E2E 테스트 코드를 작성한 경험이 있습니다.
  • 개발자의 용기를 높여주는 테스트 코드를 위해 고민합니다.

DevOps

  • 자동화를 통해 생산성을 높히는 것을 좋아합니다.
  • Github actions를 이용한 CI/CD에 익숙합니다.
  • 간단한 AWS IAM 설정, S3, CloudFront, EC2, ECS 사용 경험이 있습니다.

기타

  • Google Developer Group on Campus Lead
  • Software Maestro 12기 수료
  • 성공회대학교 소프트웨어공학과 졸업
  • 한국게임과학고등학교 프로그래밍학과 졸업
  • 1998년 4월 14일생