반갑습니다,
저는 이현섭입니다.

서울에서 7년차 웹 프론트엔드 엔지니어로 일하고 있으며 아름다운 인터페이스와 애니메이션을 구현하는 것을 좋아합니다. 개발자의 가치는 비즈니스 가치를 구현하는데서 나온다고 믿습니다. 주도적으로 업무를 진행할 수 있는 환경을 선호합니다.

Work Experience.

토스페이먼츠.

Frontend Developer - 현재

토스페이먼츠 JavaScript SDK.

- 현재
Description.

토스페이먼츠의 결제를 연동하기 위해 사용하는 JavaScript SDK를 만들고 유지보수하고 있습니다.

What did I do.
  • 일반 결제 JavaScript SDK 구현
  • 커넥트페이 JavaScript SDK 구현
  • npm 퍼블릭 패키지 배포
Tech Stack.

TypeScript, Jest, Rollup

토스페이먼츠 결제 연동 매뉴얼.

- 현재
Description.

토스페이먼츠 결제를 연동하기 위해서 참고할 수 있는 가이드 문서 제품, "토스페이먼츠 결제 연동 문서"의 프론트엔드를 설계하고 유지보수 하고 있습니다.

What did I do.
  • 토스페이먼츠 결제 연동 문서 초기 버전 구현 및 문서 본문 작성
  • 결제 연동 문서 버전 2.0 구현 및 지속 개선
  • 테크니컬 라이터와의 협업을 위한 MDX 기반 컨텐츠 관리
Tech Stack.

TypeScript, React, Next.js, MDX

커넥트페이.

-
Description.

토스페이먼츠의 간편결제 구현 솔루션인 "커넥트페이"의 JavaScript SDK와 프론트엔드를 구현했습니다.

What did I do.
  • 커넥트페이 JavaScript SDK 구현
  • 커넥트페이 프론트엔드 구현
  • MessageChannel API를 이용한 SDK와 프론트엔드 UI의 실시간 통신
Tech Stack.

TypeScript, React, Next.js, emotion, MessageChannel API

비바리퍼블리카.

Frontend Developer - 2020. 08

공통 라이브러리 기여.

-
Description.

TDS(Toss Design System, 토스 웹 서비스 대부분이 사용하는 React UI Framework)을 비롯하여 생산성을 위해 사용하고 있는 각종 사내 라이브러리를 유지보수, 개선했습니다.

What did I do.
  • 앱과 연동되는 웹뷰 다크모드 구현
  • TDS 컴포넌트 인터페이스 개선, 각종 컴포넌트 신규 개발
  • 하나의 거대한 라이브러리를 용도에 맞게 쪼개고 인터페이스 개선
Tech Stack.

TypeScript, React, Next.js, Sass, Jest

GA Silo.

-
Description.

토스의 "내 보험 조회" 서비스를 개발하면서 보험 상담으로의 전환률 향상에 공헌하고 있습니다.

What did I do.
  • "내 보험 조회" 코드 베이스 개선, 레거시 마이그레이션
  • 각종 A/B 테스트 구현을 통한 전환률 향상에 기여
Tech Stack.

TypeScript, React, Next.js, emotion

PropTech Silo.

-
Description.

PropTech(부동산 테크)와 관련된 여러가지 소규모의 서비스를 개발했습니다.

What did I do.
  • "내가 살 아파트 찾기" 구현
  • "아파트 관리비 조회/납부" 구현
Tech Stack.

TypeScript, React, Next.js, emotion

Growth Silo.

-
Description.

Growth Silo에서 토스의 성장에 도움이 될만한 아이디어를 구현했습니다. 팀 특성상, 소규모의 프로덕트를 빠르게 실행해보고 유저 반응을 본 뒤 다시 개편하여 내놓거나 아예 다른 아이템으로 전환하는 경우가 많아서 현재 서비스되고 있는 것은 없습니다.

What did I do.
  • "토스 머니백" 구현 (현재 서비스 되고 있지 않음)
  • "금융 생활 보고서" 구현 (현재 서비스 되고 있지 않음)
Tech Stack.

TypeScript, React, MobX, Sass, Jest, Next.js

스튜디오씨드 코리아.

Software Engineer -

ProtoPie Enterprise.

-
Description.

ProtoPie Studio와 연동되는 ProtoPie Cloud의 엔터프라이즈 버전의 프론트엔드 인터페이스를 개발했습니다. 프론트엔드 부분은 혼자 맡아 진행했으며, 3월 경에 1차적으로 릴리즈가 완료되어 여러 기업에 납품되었습니다.

What did I do.
  • 프론트엔드 기술환경 구성 및 기본 기능 구현
  • MobX, MobX State Tree를 사용한 스토어 디자인
  • React기반 컴포넌트 계층 구조 디자인
  • 스토리북을 이용한 컴포넌트 기반 개발 도입
  • Jest 기반의 테스트 작성
Tech Stack.

TypeScript, React, MobX, styled-components, Storybook, Jest, React Router, GitLab, GitLab CI, Docker

ProtoPie Share Page.

-
Description.

ProtoPie Studio에서 작업물을 업로드하면 웹으로 볼 수 있도록 해주는 Share Page를 개발했습니다. 마찬가지로 혼자 진행한 프로젝트이며, 스펙 상 페이지 하나만 개발하면 되는 프로젝트였기 때문에 별도의 프론트엔드 라이브러리는 사용하지 않았습니다.

What did I do.
  • 프론트엔드 / 백엔드 기술환경 세팅 및 전체 기능 구현
  • AWS Lambda를 이용한 Pie 파일 다운로드 기능 구현
  • Pie 파일 다운로드 성능 최적화
  • 다양한 브라우저 환경 및 사이즈 대응
  • CI 및 ECS를 이용한 지속적인 Blue-Green 배포 환경 셋업
Tech Stack.

TypeScript, Gulp, webpack, PostCSS, CSSNext, Express, AWS Lambda, AWS ECS, GitLab, GitLab CI, Docker

ProtoPie License Server.

-
Description.

유저가 직접 ProtoPie Studio를 사용할 수 있는 라이센스를 결제하고, ProtoPie Studio와 연동해 라이센스 체크를 할 수 있는 서버 및 구매한 라이센스를 확인할 수 있는 웹페이지를 만들었습니다. 시니어 개발자와 협업하여 두명으로 프로젝트를 진행하였습니다. 제가 맡은 역할은 주로 프론트엔드 인터페이스 코딩과, 결제 솔루션과의 연동이었습니다. 총 세 개의 솔루션(PayGate, PayPal, FastSpring)과 연동했던 경험이 있습니다. 때문에 백엔드 API 코딩도 겸하여 프로젝트를 진행했습니다.

What did I do.
  • 프론트엔드 기술환경 세팅
  • 프론트엔드 인터페이스 구현
  • 서드파티 결제 솔루션 연동
  • CS처리를 위한 어드민 툴 개발
Tech Stack.

TypeScript, Gulp, webpack, Sass, jQuery, Express, Sequelize, MariaDB(MySQL), AWS ECS, GitLab, GitLab CI, Docker

페스타.

Lead Frontend Developer -

페스타 프론트엔드.

Description.

이벤트를 주최하거나 열려있는 이벤트에 참가할 수 있는 웹 서비스인 페스타를 개발하였습니다. 창업을 염두에 두고 진행한 사이드 프로젝트로서 본업과는 무관합니다. 약 6개월 간 초기버전의 프론트엔드를 대부분 개발했습니다. 체력과 동기부여의 문제로 중도에 그만두게 되었습니다.

What did I Do.
  • 프론트엔드 기술환경 구성 및 기본 기능 구현
  • MobX, MobX State Tree를 사용한 스토어 디자인
  • React기반 컴포넌트 계층 구조 디자인
  • 스토리북을 이용한 컴포넌트 기반 개발 도입
  • Jest 기반의 테스트 작성
Tech Stack.

TypeScript, React, MobX, styled-components, Storybook, Jest, React Router, GitLab

로앤컴퍼니.

Software Engineer -

로톡 웹사이트.

-
Description.

개발팀의 신입 팀원으로서 법률 O2O 서비스인 로톡의 프론트엔드와 백엔드를 개발했습니다. 기본적인 유지보수를 비롯해 비즈니스의 요구에 맞는 다양한 새로운 기능을 개발했습니다.

What did I do.
  • 로톡 매니저 (변호사용 소프트웨어) UI 개편
  • 변호사 프로필 페이지 UI 개편
  • 변호사 포스트(CMS) 기능 개발
  • 15분 전화상담 기능 개발
  • 메인 페이지 UI 개편
  • 광고 시스템 연동 및 개발 (DoubleClick For Publishers)
  • webpack 마이그레이션
Tech Stack.

CoffeeScript, Gulp, webpack, Sass, Jade, AngularJS(v1), Express, Mongoose, MongoDB

Other Experiences.

GDG Korea WebTech.

Organizer - 현재

구글의 웹 기술 기반 개발자 커뮤니티인 GDG Korea WebTech의 오거나이저를 맡고 있습니다. 여러가지 행사를 주최하거나 돕고 있습니다.

TypeScript Korea.

Organizer -

TypeScript의 사용자 커뮤니티인 TypeScript Korea의 오거나이저를 맡았습니다.

Blog.

Author, Maintainer - 현재

seob.dev이라는 이름의 개인 블로그를 운영하고 있습니다. 비정기적으로 제가 새롭게 배우게 된 내용 등을 글로 작성해 공유합니다. 블로그는 Gatsby와 ReScript, Vercel을 사용해 구현했습니다. 이전에는 DailyEngineering 이라는 이름의 블로그를 운영했습니다.

ACM-ICPC.

Honorable Mention

ACM-ICPC라는 프로그래밍 알고리즘 경진대회에 출전해 학교별 예선에서 좋은 성적을 거두고, 지역본선에 학교 대표로 진출했습니다. 아쉽게도 본선에서는 입상하지 못했습니다.

금오공과대학교.

컴퓨터소프트웨어공학과 -

컴퓨터소프트웨어공학과에서 4년간 공부하며 컴퓨터구조, 자료구조, 컴퓨터네트워크, 웹 프로그래밍 등의 과목을 우수한 성적으로 이수하였습니다. 중간에 휴학을 하고 일을 하다가 다소 늦게 졸업했습니다.

Skills.

Overall.

  • 아름다운 유저 인터페이스 및 미려한 애니메이션 구현을 좋아합니다.
  • 항상 최신의 기술이 옳다고 여기지 않습니다. 상황에 따라 적절한 선택이 있다고 믿습니다.
  • 업무에 필요하다면 능숙한 분야가 아니더라도 적극적으로 탐색하여 최적의 결과를 낼 수 있도록 노력합니다.
  • 회사 혹은 팀의 프로세스 및 문화를 개선하거나 바꾸려는 시도를 적극적으로 합니다.

Communication.

  • 직위 및 포지션에 관계없이 적극적으로 생각을 표현합니다.
  • 지적 겸손함을 유지하기 위해 노력합니다.
  • 커뮤니케이션은 적은 것보다는 많은게 좋다고 믿습니다.

Web.

  • Search Engine Optimization 경험이 있습니다.
  • Internet Explorer, Safari를 비롯해, 다양한 OS 및 브라우저를 지원할 수 있습니다.
  • 모바일 브라우저에서의 트러블 슈팅 경험이 많습니다.

JavaScript.

  • JavaScript와 TypeScript에 능숙합니다.
  • CommonJS, ES Modules의 모듈 시스템에 대해서 이해하고 이에 따라 적절한 도구를 활용합니다.
  • Node.js 생태계의 툴링에 익숙합니다.
  • Yarn과 Yarn Berry 사용을 선호합니다.

React.

  • React hooks를 능숙하게 사용하고, 거의 모든 컴포넌트를 함수로 만듭니다. hook을 이용해 공통 비즈니스 로직을 적절히 모듈화해 사용할 수 있습니다.
  • 각종 컴포넌트 디자인 패턴에 능숙하며, 합리적인 방식으로 컴포넌트를 분리합니다.
  • PureComponent와 React.memo에 대해서 이해하고 적절한 상황에서만 사용합니다.
  • Storybook을 사용한 컴포넌트 주도 개발을 할 수 있습니다.
  • Testing Library를 사용하여 테스트코드를 작성할 수 있습니다.

DevOps.

  • AWS S3, CloudFront, Lambda@Edge 등을 이용해 어플리케이션 레이어를 구성할 수 있습니다.
  • GitHub Actions, Travis, GitLab CI 등의 CI를 구성할 수 있습니다.
  • 반복적인 업무 해소를 위해 Node.js로 CLI 도구를 만들 수 있습니다.

Contact.