MAENG.

Portfolio

안녕하세요!
프론트엔드 개발자,
김명성입니다!

복잡한 문제를 해결하고 직관적인 경험을 만드는 프론트엔드 개발자, 김명성입니다.
경력 4년 8개월

SCROLL

저는, 이런 개발자입니다

함께 성장하는

블로그 또는 커뮤니티 등을 통해 경험과 지식을 공유하며 함께 성장하는 것을 즐깁니다.

새로운 기술과 트렌드에 도전하는

문제를 해결함에 있어 새로운 것을 도전하는 것을 두려워하지 않습니다.

더 나은 UX를 선사하는

디자인과 개발을 조화롭게 결합하여, 유저에게 편리한 경험을 전달합니다.

안정성과 신뢰를 주는

테스트 코드를 통해 안정성을 높이고, 사용자에게 신뢰를 주는 서비스를 제공합니다.

99.3%빌드 시간 단축
40%버그 리포팅 감소
12+모노레포 패키지
4.8yFE 경력

현재 놀유니버스 STAY FE팀에서, React와 Typescript를 사용해 복잡한 숙박업 도메인의 B2B 플랫폼을 만들고 있습니다. 복잡한 정책과 데이터를 사용자가 쉽고 직관적으로 이해할 수 있는 인터페이스로 설계하고, 효율적인 아키텍처와 개발 프로세스 개선을 통해 팀의 생산성에 기여하며, 지속 가능한 코드 베이스를 구축하고 있습니다.

Projects프로젝트

25.08 · v0.1.3 · [개인] 크롬 확장프로그램

Bookmark Pro

웹과 브라우저 확장프로그램에서 북마크를 효율적으로 관리할 수 있는 모던 북마크 관리 솔루션입니다. 통합 북마크 관리, 고급 검색 및 필터링, 실시간 동기화 등 다양한 기능을 제공합니다.

ReactTypescriptNextTailwindCSSSupabaseTurboreposhadcn/ui
GitHub ↗
22.02 · v1.5.2 · [개인] 디자인 시스템

Maeng Design

디자인 시스템 Maeng Design은 React 프로젝트를 위한 사용자 인터페이스 사양을 통일하고, 설계 차이와 구현에 필요한 불필요한 비용을 낮추며, 설계 및 프론트엔드 개발 자원을 지원하기 위해 만들어졌습니다.

ReactTypescriptEmotionStorybookRollupGatsbyNetlify
GitHub ↗
20.10 · v2.0.0 · [개인] 공간대여 웹사이트 (외주)

서울일삼

회의실 대여 예약사이트를 제작하였습니다. 직접 서비스를 기획하고 디자인하였으며 온라인 판매 서비스를 위한 상표등록, PG사 가입, 통신판매업신고 등 개발 외의 사업 운영을 위한 전반적인 인프라를 구축하였습니다.

ReactTypescriptNextJSExpressAWSJWTOAuthPassportMongoDBMySQL
GitHub ↗
20.08 · v1.0.0 · [팀] 우아한 테크 캠프

B마트 모바일 웹

우아한 테크 캠프 멤버들과 배달의 민족 내부 서비스 중 하나인 B마트를 NextJS를 활용하여 구현하였습니다.

ReactTypescriptNextJSStorybookExpressJWTOAuthPassportGithub ActionMySQL
GitHub ↗
01 / 04

Experiences경력

01 / 03

놀유니버스(야놀자)

2022.09.26 - 재직중

놀유니버스 STAY FE팀에서 React와 Typescript를 사용해 복잡한 숙박업 도메인의 B2B 플랫폼을 만들고 있습니다.

  • 숙박업 B2B 플랫폼(파트너센터 PC/Mobile, 관리자 대시보드, 제휴입점 관리자 등) 개발 및 유지보수
  • 시스템 통합 이주 프로젝트: 여러 분할된 서비스를 파트너센터에 통합하여 운영
  • Vue → React로의 기술 스택 전환
  • Sentry + Client Log를 통한 에러 추적 및 사용자 피드백을 통한 종합적 서비스 분석
성과 자세히 보기
  • Vue에서 React로 점진적 전환을 위해 Nginx Reverse Proxy를 활용하고, S3/CloudFront 기반 버전 관리 배포 구성으로 서버 리소스를 절감하며 버그 리포팅 40% 감소 및 개발 생산성 향상
  • 모노레포 아키텍처 구현으로 3개 애플리케이션과 12개 공유 패키지의 개발을 간소화
  • Trunk-Based Development(TBD) 및 feature-flag 도입으로 개발 프로세스 개선
  • 증분 빌드 도입: 빌드 및 타입 검사 시간 최대 99.3% 단축(150.15s → 1.03s), 평균 41.2% 단축(150.15s → 88.29s)
  • GitHub Actions를 활용해 코드 검증 자동화 및 체크박스 기반 필수 리뷰 항목 시스템 구현하여 코드 리뷰 시스템 개선
  • ESLint, Prettier, CSpell, Storybook 도입으로 코드 품질 및 프로세스 개선
  • E2E 테스트 도입: Playwright를 이용한 E2E 도메인 테스트 도입
TypescriptReactVueEmotionStorybookViteReact-QueryMUIPlaywrightJenkinsGitHub ActionsBeanstalkCloudFrontS3

IGAWorks (Adpopcorn)

2021.07.19 - 2022.09.23

IGAWorks 애드팝콘 개발팀에서 프론트엔드 개발자로 근무하며, 인앱비딩 알고리즘과 DMP 기반 애드서버, 미디에이션 기능 등 수익화를 위한 서비스인 SSP 파트를 담당하였습니다.

  • 광고 B2B 플랫폼(Adpopcorn SSP) 개발 및 유지보수
  • Adpopcorn SSP Console 리뉴얼: NextJS → React로 기술 스택 전환 및 디자인 개편
  • 콘픽 뉴스 콘텐츠 플랫폼 개발: 뉴스 콘텐츠를 HTML로 변환하고 광고 삽입 기능을 포함한 플랫폼 구축
  • Adpopcorn SSP 홈 페이지 개발: Svelte를 활용한 랜딩 페이지 개발
성과 자세히 보기
  • NextJS → ReactJS로 전환: SSR에서 SPA로 변경하면서 불필요한 오버스펙 제거 및 디자인 개편, 복잡한 상태관리 간소화 등 전반적인 시스템 성능 개선
  • 상태관리 개선: Redux + Saga를 통한 상태관리를 React-Query 및 Recoil을 활용하여 중복 API 호출 제거 및 복잡한 상태 관리를 개선하여 개발 리소스 간소화
  • CodePipeline을 통한 배포 자동화: AWS ECS와 CodePipeline을 통한 CI/CD 개선
  • 차트 라이브러리 개선: Recharts와 SVG를 활용해 데이터 접근성 및 분석 효율성 강화
  • Svelte의 컴파일 기반 구조를 활용해 빠른 렌더링과 경량화된 고성능 랜딩 페이지 개발
TypescriptReactNextJSSvelteEmotionAnt DesignReact-QueryRecoilGithub ActionECSEKSCode PipelineDocker

짐싸 (Zimssa)

2020.12.01 - 2021.07.08

짐싸 프론트엔드팀에서 이사 서비스 매칭 플랫폼인 짐싸 파트너앱 개발 및 유지보수를 담당하였습니다.

  • 이사 서비스 매칭 플랫폼(짐싸 파트너 앱) 개발 및 유지보수
  • 디자인 2.0 적용: 다크모드 적용 및 UI/UX 개선
  • 디자인시스템 구축: 컴포넌트 기반 디자인 시스템을 구축해 UI 일관성과 개발 생산성을 향상
성과 자세히 보기
  • Javascript → TypeScript 도입 및 의존성 업데이트를 통해 기술 스택 현대화 및 유지 보수성 향상
  • Atomic Design 원칙을 사용한 디자인 시스템 구현 및 다크 모드 도입
  • Storybook 도입을 통해 UI 검증 및 테스트
  • Lazy-Loading을 통한 렌더링 성능 및 UX 개선
  • 컴포넌트 생성 스크립트를 이용한 자동화
  • Cordova 플러그인 이용한 사용자 권한 설정 개선
  • ESLint, Prettier, Husky, lint-staged 적용을 통한 코드 일관성과 품질 유지
JavascriptTypescriptCordovaSASSStyled ComponentReduxStorybook

이렇게 일합니다

01My Tech Skills are..
  • React와 Vue 를 통해 SPA를 개발할 수 있습니다.
  • Next와 Nuxt 를 통해 SSR을 개발할 수 있습니다.
  • 디자인시스템을 개발한 경험이 있습니다.
  • Webpack, Babel, ES6 등에 익숙합니다.
  • Storybook 을 활용한 UI 컴포넌트 테스트 경험이 있습니다.
  • 테스트 코드 및 배포 자동화(CI/CD)를 통해 생산성을 향상하고자 노력합니다.
  • 성능 및 리소스 최적화를 위해 노력합니다.
02My Soft Skills are..
  • 프로젝트를 통한 다양한 협업 경험이 있어 다양한 분야의 사람들과 유연한 커뮤니케이션이 가능합니다.
  • 항상 긍정적인 생각을 가지고 문제를 해결하려고 노력합니다. 어떤 문제상황이 닥친다 하더라도 포기하지 않고 문제를 해결하기 위해 노력합니다.
  • 어떤 요구사항이 주어지더라도, 주어진 Task를 시간 내에 완성하기 위해 끊임없이 노력합니다.
  • 코드 리뷰를 통해 동료들과 함께 지식과 경험을 공유하고 피드백을 주고받으며 서비스를 점진적으로 발전시킬 수 있습니다.
  • 새로운 아이디어를 통해 의미있는 가치를 창출할 수 있습니다.
  • 커뮤니티와 오픈소스에 관심이 많습니다. 다양한 사람들과 소통하는 것을 즐깁니다.
03My Design Skills are..
  • UI/UX에 관심이 많으며, 완벽한 사용자 경험을 위해 지속적으로 고민하고 또 노력합니다.
  • Figma를 활용해 디자인시스템을 직접 만들어본 경험이 있습니다.

걸어온 길

22.09.26 - 현재놀유니버스(야놀자) FE 개발자재직중
놀유니버스 (NOL Universe)
21.07.19 - 22.09.23IGAWorks Adpopcorn FE 개발자
IGAWorks
21.02.24서울과학기술대학교 컴퓨터공학과 졸업
서울과학기술대학교 (SEOULTECH)
20.12.01 - 21.07.08짐싸 FE 개발자
짐싸 (Zimssa)
20.07.01 - 20.08.28우아한 테크 캠프 3기
우아한 형제들 (woowahan)
19.10.01 - 20.06.30철도경영정책연구소 교통 수요 분석
철도경영정책 연구소
19.09.16 - 19.11.30데벨업(DevelUp) 1기
구름 (Goorm)
19.08.12 - 19.09.11블로키TF팀 FE 인턴
데이블 (Dable)
Education
2015.03 - 2021.02서울과학기술대학교 (SEOULTECH)
컴퓨터공학과 학사
2011.03 - 2014.02공주한일고등학교 (HANIL HIGH SCHOOL)
인문계(이과)

기술 스택

Frontend Skills
JavascriptTypescriptHTML/CSSReactJSVueJSNextJSNuxtJSEmotionStyledComponentTailwindcssStorybook
Backend Skills
NodeJSNestJSGraphQLMySQLMongoDB
Collaboration Skills
Git/GithubBitbucketJiraConfluenceNotionSlack
Deploy Skills
AWS/PipelineAWS/EC2AWS/ECSDockerNginxPM2JenkinsNetlifyGithub Action
Etc...
FigmaFirebase

Contact

함께 일해요.

이력서 다운로드 버튼은 언어 설정(ko/en)에 따라 해당 PDF를 내려받습니다.