Contact
Work Experience
2024.10 - 2025.11 (약 1년)
Fullstack Developer | 프리랜서
•
테마여행, 먹방투어 공유 서비스인 “TELCO” 앱&웹 개발
◦
◦
주요 기술 스택 : Next.js, Flutter, Strapi Server(Node.js), MySQL
◦
주요 작업
▪
“AI 여행찾기” 서비스
•
서비스에 특화된 AI 에이전트를 만들어 사용자 질의에 답변하는 서비스
•
클라이언트 컴포넌트를 스트리밍 렌더링하기 위해 JSON Stream & Parser를 구현. 컴포넌트 내의 text들을 스트리밍 렌더링.
•
하나의 에이전트에 여러개의 툴을 붙이는 방식으로 구축해보았지만 할루시네이션이 발생. Mastra Worflow를 도입하여 사용자 질문을 Step 별로 나누고 각 Step 별로 최적화한 에이전트를 적용하여 할루시네이션을 방지.
•
기술 스택: Mastra.ai(AI Agent Framework), SSE(ServerSentEvent), JSON Stream & Parser, Postgres DB, Third party Geo Data API (Kakao, Open Street Map)
시연 영상
▪
SEO 전용 페이지
•
구글, 네이버 등 검색엔진 상위 노출을 위한 SEO 최적화 페이지 개발
•
“강남 성시경 맛집” 처럼 검색어 중 지역(강남), 방송유형 필터(성시경), 카테고리(맛집)를 분류하여 디비에서 매칭되는 검색결과 리스트를 보여주는 SEO 최적화 페이지 개발
•
검색어 매칭 방식: 사전 기반 가장 긴 키워드 우선 매칭 방식 (Greedy Max Match)
▪
Wysiwyg 에디터 & 뷰어 개발 - lexical.js
•
2021.5 - 2024.3 (2년 10개월)
Frontend Developer | Zigbang
•
Frontend Infrastructure 팀
◦
팀 업무: CI/CD, E2E 테스트, CMS 관리, 주요 라이브러리 버전업 등 서비스팀에 지원이 필요한 업무
◦
프로젝트
▪
직방 ios/android 모바일 앱 E2E 테스트 프로세스 구축 및 운영
•
시작동기 : 서비스 개발팀 재직 당시, QA 테스트 전에 개발단 테스트에서 사이드 이펙트를 개발자가 미리 발견해서 대응 할 수 있도록하기 위해 Appium으로 E2E 테스트를 만들어 팀에 시연. 이후 Frontend Infrastructure 팀의 주요 프로젝트로 선정되어 팀 이동하여 진행.
E2E 테스트 시스템 구조도
•
Browserstack Appautomate 인프라를 이용한 Appium 모바일 앱 E2E 테스트 시스템 구축
•
Cucumber를 이용한 BDD(Behavior Driven Development) 방식의 테스트 시나리오 관리
•
성과
◦
E2E 테스트가 전체 QA 테스트 리스트의 약 70%를 커버 - SNS로그인, 회원가입, 탈퇴, 딥링크(100%), 지도 렌더링 검증, 매물 개수 검증, 헛걸음 보상제 신청 등
◦
React Native 버전업과 같은 민감한 라이브러리 버전업 작업이 Full QA 전, 개발자 선에서 작업 완성도를 테스트하는데 사용
◦
기존에 간략하게, 추상적으로 문서화했던 테스트 시나리오를 Cucumber(Gherkin) 문서로 구체화. QA와 개발자간의 소통 방식 개선.
▪
사용자 로깅 관리 시스템 구축 및 운영
ZAMS 적용 후 Workflow
•
사용자 로깅 관리 백오피스 시스템 개발 - Typescript, Next.js, Nodejs, GraphQL, Apollo-client, Recoil, AWS(Lambda, s3, DynamoDB, CDK 등)
•
관련 내용을 직방 기술블로그에 포스팅 - 직방이 사용자 행동 로그를 관리하는 방법. ZAMS
•
성과
◦
개발자와 비개발자간의 커뮤니케이션 방식 개선
◦
개발자를 위한 라이브러리 및 타입지원
▪
차트 컴포넌트 개발
실제 직방 앱/웹 화면
•
기존 D3.js & jQuery로 만들어진 차트 코드를 React 컴포넌트로 전환&새로운 기능 추가
•
기획자, 디자이너, 서비스 개발자와 소통하기 위해 데이터 테스트 Playground 개발, Storyboobook 문서화
•
데이터에 따라 비주얼적인 예외처리가 많이 필요한 차트의 특성을 고려해 Unit Test를 작성하여 안정성을 높임
•
원룸/빌라/오피스텔 서비스 개발팀
◦
원룸/빌라/오피스텔 서비스 개발&운영
◦
Typescript, React Native, React Native Web, AWS(S3, Cloudfront)
2020.7 - 2020.12 (6개월)
Frontend Developer | BMSMILE
•
신규 개발팀에서 반려동물 브랜드 쇼핑몰 Pethroom의 단독 웹 개발을 담당
•
주요기능
- 계정 & 인증(Firebase Auth) | - 주문관리 &결제 | - 리뷰 |
- 반려동물 조회/등록/수정/삭제 | - 멤버십 | - 미션 |
- 체험단 •쿠폰 •포인트 | - 마이페이지 | - 주소 관리 |
- 장바구니 |
•
기존 외주로 운영되던 서비스를 자체 서비스로 전환하기 위해 모든 시스템을 처음부터 만든 프로젝트
•
기술 스택: Typescript, React.js(Hooks), Redux, Redux-Saga, Storybook, Styled-Components, Firebase Auth, AWS(Cloudfront, Route53), Webpack
•
모든 UI 컴포넌트를 Storybook으로 등록. 기획자, 디자이너와 원활한 소통과 UI 예외사항 대응을 위해 Playground 활용
•
회사 브랜드 페이지 wordpress 제작
2016.6 - 2019.4 (2년 11개월)
Fullstack Developer | Slowalk
•
[국립암센터] 암발생 지리정보 서비스
◦
지도기반 데이터 시각화와 차트를 통한 대시보드 개발 - Vue.js, D3.js
•
[서울대학교산학협력단] 미세먼지 대기건강지수 지도 데이터 시각화 웹 페이지
◦
지도기반 데이터 시각화와 차트를 통한 대시보드 개발 - Vue.js, D3.js
◦
데이터 시각화 효용성을 측정하기 위한 설문조사 웹 페이지 개발 - Vue.js
◦
서울대학교 산악협력단의 요청으로 서울대 대학원에서 대학원생들과 교수님들을 대상으로 “인터렉티브 데이터 시각화”에 대한 발표를 진행함.
•
[언론재단] 뉴스트러스트 프로젝트
◦
형태소 데이터 시각화 - D3.js
◦
설문조사 웹 개발 - Ruby on Rails
•
[서울시금천직장맘지원센터] 금천직장맘 홈페이지
◦
상담관리 웹서비스 개발 - Ruby on Rails
◦
주요기능
▪
관리자 페이지 (회원관리, 배너 관리, 문의 & 답변 관리, 알림 이메일)
▪
상담 게시판(CRUD) & 댓글 기능
▪
회원 관리(로그인, 회원가입, 비밀번호 찾기, 아이디 찾기)
