안녕하세요,
저는 임익환입니다.

3년 차 웹 엔지니어입니다.
TypeScript, Python, MongoDB, Nginx, AWS 등의 기술로 시스템을 설계, 개발, 운영한 경험이 있습니다.
레거시에서 신규 시스템으로 전환, 클라우드 환경(AWS)으로 마이그레이션 등 다양한 경험을 가지고 있습니다.
완벽하지 않더라도 우선 완성하는 것을 중요하게 생각합니다. 비효율적인 업무 프로세스를 개선하는 것을 좋아하며, 체계가 부족해도 주도적으로 체계를 만들어가며 업무를 진행할 수 있습니다.

Work Experience.

Smartel.

Software Engineer -

Overall.

MVNO 통신사인 스마텔에서 프론트, 백엔드, 클라우드 등 다양한 업무를 수행하고 있습니다. 회사에 합류했을 때, 모든 서비스가 외주를 통해 개발되어 소스 및 버전 관리가 제대로 이루어지지 않는 상황이었습니다. 제가 근무하는 동안 바닥부터 점진적으로 체계를 구축하고 문제점을 개선해 나가는 데 집중하고 있습니다.

프로세스 개선.

기술 스택 전환.

처음엔 Spring Boot, MySQL 조합으로 개발을 시작하였습니다. 하지만 운영진의 요구에 따라 빠른 개발과 배포가 필요했고, DB 설계가 자주 변경되어야만 했습니다. 따라서 Next.js, FastAPI, MongoDB, Vercel 등 생산성 높은 기술 위주로 변경하여 요구 사항에 빠르게 대응할 수 있었습니다.

Backend blocking 해결.

셀프개통과 같은 통신사 api는 호출에 20초 이상이 걸릴 때가 있습니다. Python FastAPI로 해당 api를 구현했을 때 가끔 blocking이 되는 이슈가 있었습니다. Serverless(Lambda)를 이용하여 api가 병렬처리 되도록 구성하여 이슈를 해결하였습니다.

Serverless를 위한 Proxy 서버

Vercel, AWS Lambda와 같은 서버리스 서비스는 고정된 ip가 없어, 타사 api를 사용하는 데에 제약이 있었습니다. 서버리스 서비스를 사용하면서도 고정된 ip를 사용할 수 있도록 Nginx를 활용하여 Proxy 서버를 구축하였습니다.

DevOps.

CI/CD를 직접 구성하는 것 보다 외부 서비스에 의존하고, 개발에 집중하는 것이 회사에 더 이득이라고 판단되어, Vercel을 활용하여 CI/CD를 구성하였습니다.

홈페이지.

Description.

기존 홈페이지는 페이지 마다 개발 업체와 도메인 주소가 다른 문제가 있었습니다. 이는 SEO에 좋지 않았으며, 페이지간 쿠키와 같은 데이터를 공유하기 어려웠습니다. 기존 홈페이지의 문제점들을 개선하기 위해 새로운 홈페이지를 자체 개발하였습니다. SEO를 고려하여 개발하였기에 오픈 일주일만에 구글 검색 1페이지에 노출되었으며, 조회수 10만회를 달성하였습니다.

What I Did.
  • 서비스 개발 및 운영
  • Next.js를 활용한 SSR 기반 Frontend 개발
  • Redis를 활용한 데이터 캐싱
  • Vercel을 활용한 CI/CD
  • Oracle DB -> MongoDB 마이그레이션
  • AWS S3, Route53을 이용하여 이전 도메인 redirection 적용
Tech Stack.

TypeScript, Next.js, TailwindCSS, FastAPI, MongoDB, Redis, AWS

선불 충전 서비스.

Description.

고객이 선불 요금을 직접 충전할 수 있는 웹 페이지를 개발하였으며 결제 모듈을 연동하여 결제 기능을 구현하였습니다.

What I Did.
  • 전반적인 Frontend, Backend 개발
  • 3사 통신사의 선불 충전 API 개발
  • 웹 페이지 이니시스 결제 모듈 연동
  • Redis를 활용한 휴대폰 인증번호 발송 기능 구현
Tech Stack.

TypeScript, Next.js, MongoDB, Redis

온라인 가입 신청서.

Description.

스마텔의 요금제를 가입할 수 있는 신청서입니다. 처음에는 통신 도메인에 대한 이해도가 부족하여 개발에 어려움이 있었으나, 시행착오를 거쳐 하루 1천명의 가입자를 담당하는 스마텔 핵심 서비스를 개발하였습니다. 명의 도용 개통을 방지하기 위해 전자서명 기능을 탑재하고, 서버단에서 신청자 일치 여부 검증을 진행하였습니다.

What I Did.
  • Frontend, Backend 개발 및 운영
  • 고객 친화적인 UX 적용
  • 카카오, NICE 공인인증서 전자서명 기능 개발
  • 작성중인 신청 정보를 Redis에 저장하여 속도 향상
  • Vercel을 활용한 무중단 배포
Tech Stack.

AWS - VPC, EC2, NLB, ALB, Next.js, MongoDB, Docker

웰컴저축은행 가입 신청서.

Description.

웰컴저축은행 앱에서 스마텔 요금제를 가입할 수 있도록 개발하였습니다. 은행권 서버와 통신하기 위해 전용망을 구성할 때 어려움이 있었으나, AWS Support와 인터넷 검색을 활용하여 전용망을 구성하는데에 성공하였습니다.

What I Did.
  • AWS VPC, NLB 를 활용하여 은행권 서버와 전용망 구성
  • AWS ALB 를 활용하여 로드밸런싱 구축
  • Frontend, Backend 개발 및 운영
  • Docker를 이용하여 배포 환경 구축
Tech Stack.

AWS - VPC, EC2, NLB, ALB, Next.js, MongoDB, Docker

LGU+ 셀프 개통.

Description.

셀프개통은 고객이 직접 유심을 통해 휴대폰을 개통할 수 있는 서비스입니다. 기존의 레거시 셀프개통은 성공률이 10%에 불과하였으며 오개통이 되는 등 여러가지 문제가 있었습니다. 이 문제를 빠르게 해결하기 위해 생산성 높은 기술 위주로 시스템을 설계하여 신규 셀프 개통 서비스를 개발하였습니다.

What I Did.
  • Frontend, Backend 개발
  • Docker를 이용하여 배포 환경 구축
  • AWS ALB를 활용한 로드밸런싱
  • Net Gateway를 활용하여 로드벨런서에 outbound IP 설정
  • FastAPI 사용 시 발생하는 request blocking 문제를 AWS Lambda를 활용한 병렬 처리를 통해 해결
  • Redis를 활용하여 분산 시스템 간의 데이터 공유
Tech Stack.

AWS - ALB, VPC, EC2, TypeScript, Next.js, TailwindCSS, FastAPI, Docker, Redis

스마텔 관리자 페이지.

Description.

스마텔 직원들이 서비스를 관리할 수 있는 백오피스 서비스를 개발하였습니다. 홈페이지 관리, 요금제 등록/수정, 고객 관리 등 다양한 기능이 있습니다.

What I Did.
  • Next.js를 사용하여 Frontend, Backend 개발
  • Vercel을 활용한 CI/CD
Tech Stack.

TypeScript, Next.js, MongoDB, Redis

Medical IP.

Software Engineer -

Overall.

시리스 C 의료 스타트업에서 프론트엔드 및 백엔드를 개발 및 운영을 하였습니다. 기존 레거시 프로젝트 개선 및 신규 개발을 하였으며, 제가 개발에 기여한 TiSepX의 경우 의료기기 판매를 위한 식약처 인증까지 성공하였습니다.

TiSepX.

Description.

폐질환을 분석해주는 AI 서비스인 TiSepX 의 프론트엔드와 백엔드를 개발하였습니다. ML엔지니어와 협업하여 개발하였으며, HTTPS인증 등 식약처의 요구사항을 반영하여, 의료기기 판매를 위한 식약처 인증에 성공하였습니다.

What I Did as Frontend.
  • 생산성 향상을 위해 기존 Redux State를 React-query로 변경
  • Zustand를 도입하여 남아있는 Redux boilerplate 제거
  • TailwindCSS를 도입하여 리액트의 CSS 복잡성 문제 해결
What I Did as Backend.
  • FastAPI를 활용하여 백엔드 개발
  • Docker를 도입한 배포 환경 구성
  • Nginx와 Certbot을 활용한 리버스 프록시 환경 구성 및 HTTPS 인증서 발급 자동화
Tech Stack.

Python, FastAPI, Docker, Nginx, TypeScript, React, TailwindCSS

Homepage.

Description.

회사 소개를 위한 웹 페이지를 개발하였습니다.
기존의 홈페이지가 React 특성상 SEO가 부족하다고 판단되어, SSR을 도입하여 SEO 향상을 통해 방문자 수를 증가시켰습니다.

What I Did.
  • 프론트엔드 개발
  • JS 프로젝트에 TS를 도입하여 유지 보수성 향상
  • React 프로젝트에 Next.js를 도입하여 SSR 구성
Tech Stack.

TypeScript, React, Next.js

Visual Printing.

Description.

환자의 장기 모델을 웹에서 볼 수 있는 서비스인 Visual Printing의 프론트엔드와 백엔드를 개발하였습니다. 프론트엔드는 VanillaJS를 React로 변환하여 생산성을 향상시켰습니다. 백엔드는 레거시 Node.js 서버를 리팩토링을 통해 유지보수성 및 확장성을 향상시켰습니다. 현재는 일부 병원 내부에서 사용되고 있어 따로 외부에 공개된 페이지는 없습니다. Three.js 부분에 대한 간단한 예시는 오픈소스로 만들어 보았습니다.

What I Did as Frontend.
  • 생산성 향상을 위해 Vanilla JS를 React로 교체
  • React Three Fiber를 활용하여 Three.js 코드 가독성 향상
  • 30초가 걸리던 초기 렌더링 속도를 1초 미만으로 단축
  • URL만으로 다른 사용자의 정보를 진입할 수 있던 문제 해결
What I Did as Backend.
  • 기능 확장이 불가능하던 레거시 프로젝트 모듈화 및 리팩토링
  • TypeScript를 활용하여 OOP 방식으로 프로젝트 재구성
  • 세션 도입, 비밀번호 암호화 등 보안 강화
Tech Stack.

TypeScript, Node.js, Express.js, React, Three.js

Personal Project.

FastAPI Server.

Maintainer -

FastAPI 기반의 REST API 서버.

Description.

FastAPI를 통해 REST API 서버를 구성하는 예시가 많이 없어서 직접 학습도 하며 다른 사람들에게도 도움이 되고자 fastapi-server 를 만들었습니다.

What I Learned.
  • FastAPI Utilities를 활용한 class 기반의 라우터 설계
  • alembic을 활용한 DB 버전 관리 방법
  • Pydantic을 활용한 데이터 유효성 검증 및 설정 관리
  • Pytest를 활용한 테스트 코드 구성
Tech Stack.

Python, FastAPI, PostgreSQL, Docker

Activity.

Blog.

Author, Maintainer - 현재

제가 새롭게 배운 내용이나 해결했던 문제들을 개인 블로그에 공유하여 다른 사람들에게 도움이 되고자 하고 있습니다.

Skills.

Overall.

  • 유지 보수성 및 확장성이 뛰어난 코드가 가치있는 코드라고 생각합니다.
  • 업무에 필요하다면 능숙한 분야가 아니더라도 적극적으로 탐색하여 최적의 결과를 낼 수 있도록 노력합니다.
  • 문제에 직면하면 스스로 탐구하고 해결하기 위해 노력합니다.
  • 비효율적인 프로세스를 개선하여 생산성을 향상시키는 것을 좋아합니다.

Communication.

  • 영어에 능숙하여 공식 문서나 자료를 영어로 찾아보는 편입니다.
  • 팀원 간의 커뮤니케이션은 적은 것보다는 많은게 좋다고 믿습니다.

FastAPI.

  • SQLAlchemy와 Alembic을 활용하여 DB를 제어하고 버전관리를 합니다.
  • Pydantic을 활용하여 데이터 유효성 검사를 합니다.
  • Pytest를 활용하여 테스트 코드를 작성합니다.

Next.js, React.

  • 상황에 따라 서버와 클라이언트 컴포넌트를 적절히 활용합니다.
  • 타입스크립트 환경에 익숙합니다.
  • 합리적인 방식으로 컴포넌트를 분리하여 재사용성을 높입니다.
  • 클라이언트 캐싱을 적절히 활용하여 DB 접근 횟수를 줄입니다.
  • React 사용 시 React-query와 Zustand 조합을 사용하여 상태를 관리합니다.

Node Express.

  • 타입스크립트를 활용한 OOP 구조로 프로젝트를 구성합니다.
  • 미들웨어 사용에 익숙합니다.
  • TypeORM을 활용하여 DB를 제어합니다.
  • Swagger를 구성하여 api 시각화를 할 수 있습니다.
  • Jest를 활용하여 테스트 코드를 작성합니다.

DevOps.

  • Docker를 활용하여 Node.js, Python, Nginx 등의 배포 환경을 구성한 경험이 있습니다.
  • Nginx을 활용해 Reverse Proxy를 구성하고 HTTPS 인증을 자동화 한 경험이 있습니다.
  • AWS VPC를 직접 구성하고 VPN을 이용한 전용망을 구성한 경험이 있습니다.
  • AWS ALB를 이용하여 로드밸런싱을 구성한 경험이 있습니다.