Search

웹 개발자 송현지입니다 :)

대학생 때부터 창업에 관심이 많아 창업경진대회, 해커톤, 창업동아리, 스타트업 인턴 등 여러 활동을 했습니다. 아이디어에만 그치지 않고 직접 원하는 서비스를 만들고 싶어 개발자가 되었습니다. 그리고 그를 위해 매일 조금씩 노력하고 있습니다. 매일의 노력이 큰 변화를 만든다고 믿습니다 :)
저에 대해 더 알고 싶으시다면 아래 페이지에서 더 보실 수 있습니다.

Links

Email guseod24@gmail.com
LinkedIn 링크드인 전체공개용 프로필 보기
Github https://github.com/roseline124
Blog https://roseline.oopy.io
 Portfolio https://roseline-song.com

Skills

Frontend
React, Next.js, Tailwind CSS, Panda CSS, Xstate, Zustand, GraphQL, Three.js, R3F, Drei, GLSL
Backend
Nest.js, Firebase, Supabase, Prisma, TypeORM, Web Crawling, Web Automation Script, AWS
DX
github actions, slack, notion, vscode extension, mcp

PROJECT

2019. 8 ~ 2025.4

IHateFlyingBugs - Frontend 개발자

2024.06. ~ 현재
온라인 비대면 과외 서비스 밀당PT와 AI 디지털교과서의 CMS, LMS, B2C(학생 화면) 사이트 프론트 엔드 개발.
경력 소개
AIDT 디지털 교과서, 비대면 온라인 과외 플랫폼 (LMS, CMS, B2C) 프론트엔드 개발
Tiptap editor를 커스터마이징해 말하기, 토글, 차트 노드 등 복잡한 컨텐츠 작성 기능 구현.
Vercel 배포 자동화, 코드리뷰 봇, 슬랙 배포 알림, VSCode용 Storybook 확장프로그램 등으로 개발자 경험 개선.
학습 화면 챗봇 및 채팅 시스템 개발.
QA 팀과 자연어 기반 playwright MCP 스크립트 작성 스터디를 주도해 협업 품질도 향상.
다국어 지원을 위해 lingui를 사용해 번역 파일을 자동으로 생성하고 관리.
AI 디지털 교과서 개발 시 시/청각 장애인을 위해 웹 접근성을 준수하여 개발
사용 기술
TypeScript Next.js xstate lingui tiptap

다메다메(Dietmate, Link)

2024.03. ~ 2024.04
기획, 디자인(Figma), 앱 개발(React-Native/Nest.js) 커플 다이어트 앱 1인 개발.
“혼자하는 다이어트는 이제 다메다메! 연인과 함께 다이어트를 시작해 보세요.”
경력 소개
코드 커밋 시 AWS ElasticBeanstalk에 서버 자동 배포하는 github action 작성
React-Native-Progress-Bar Npm 오픈소스 라이브러리 개발
메이트 칭찬 혹은 식단/운동 기록 시 푸시. (firebase로 Push Notification 구현)
사용 기술
TypeScript Nest.js React-Native Firebase Supabase

토스 코어 / 증권 (겸직) Node.js 개발자

2022.08.01 ~ 2023.09.25
토스 서비스 내 자동화 서비스 및 백엔드 서버 개발
경력 소개
스크래핑용 config 서버, 임직원 데이터 분석 툴 BFF 서버, 슬랙봇 훅서버 등 개발 및 유지 보수
스크래핑 어드민 툴 일부 개발
사기계좌 및 바이럴 데이터 등 스크래핑 배치 개발
증권 open graph 스크래핑 서버 개발
증권 미성년자 계좌개설 스크래핑 개발
Nest.js 관련 데코레이터 기술 블로그 포스팅 https://toss.tech/article/nestjs-custom-decorator
사용 기술
TypeScript Nest.js Python

토스 증권 Node.js 개발자

2021.07.05 ~ 2022.08.01
토스 서비스 내 자동화 서비스 개발
경력 소개
코어 카드해지, 상생지원금 신청 및 사용내역 조회 서비스 개발
증권 스크래핑 환경 구축(CI, CD, 모니터링, 개발 환경 등등)
증여세 신고 스크래핑 개발 및 안정화
증권 웹뷰 테스트 자동화 프레임워크 개발: 슬랙으로 테스트 요청 - 연결된 단말에서 테스트 실행 - 슬랙 결과 전송
증권 DART 공시 등 각종 스크래핑 배치 개발
python & appium 활용한 증권 웹뷰 테스트 자동화 프레임워크 개발
사용 기술
TypeScript Nest.js Python

서플(Site Link)

2020. 9 ~ 2021.07.02
서버, 프론트 엔드, 어드민 개발
서비스 소개
[서플 - 서버] 리뷰 업무 자동화로 콘텐츠 발행 병목 해결
[결과]
리뷰대기 개발 콘텐츠: 2,847개에서 1개로 감소
개발 콘텐츠가 매일 20개씩 발행되도록 스케줄링.
구글 데이터 스튜디오와 DB를 연동해 일일 콘텐츠 대기/발행 지표 보고서가 매일 슬랙으로 알림오도록 설정
[개발 배경]
콘텐츠 큐레이션 서비스인 서플(https://supple.kr)의 리뷰(콘텐츠 검수) 업무 자동화 개발
기존 콘텐츠 검수는 사람에 의존하는 방식이어서 콘텐츠 발행에 병목이 생김
콘텐츠 검수 과정에서 사람의 업무가 최소화되도록 각 리뷰 단계를 자동화
[개발 과정]
엘라스틱서치로 콘텐츠 태깅 자동화, 머신러닝으로 리뷰어가 수동으로 태깅 시 콘텐츠에 맞는 태그 추천
엘라스틱서치로 동의어, 사전을 통해 해당 태그에 맞는 포스트를 검색해 태깅. cli 커맨드로 만들어 lightsail에 배포. crontab으로 매일 실행되도록 스케줄링해 크롤링된 콘텐츠를 일괄 태깅
OneVsRestClassifier를 사용한 선형 분류 모델로 Multi-Label-Classification 작업 후, fastapi로 빌드하여 lightsail에 배포
[서플 - 클라이언트]
[결과]
client 번들 사이즈 최적화: 라이트하우스 퍼포먼스 스코어 증가, 페이지 번들 사이즈 감소
github action cache를 사용해 github action에서 install, build 실행 시간 감소
gitmoji, PR 템플릿, 스쿼시 머지 사용으로 프로젝트 환경 개선
[개발 과정]
확장프로그램의 번들 사이즈를 가볍게 유지하기 위해 번들사이즈 최적화 진행
next-budle-analyzer로 번들 사이즈 분석하여 크기가 큰 라이브러리 대체
코드 스플리팅으로 번들 사이즈가 큰 상점 페이지 개선
이후, size-limit 액션으로 번들 사이즈 체크 및 제한
sentry 프로젝트의 깃헙 액션 워크플로우를 참고해, action/cache 사용하여 액션 실행 시간 감소
팀원과 상의하여 gitmoji, PR template 등을 활용해 git commit, merge 전략, PR 부분 개선
[서플 - 서버/클라이언트/어드민] 캐시 적립, 쿠폰 API, 클라이언트, 어드민 개발
[결과]
(확장프로그램에서만) 피드에서 랜덤으로 뜨는 캐시 및 적립 기능 개발
쿠폰 API 개발 / 리스트, 상세 페이지 / 어드민 개발
Sentry로 어뷰징, 버그 모니터링
[개발 과정]
쿠폰 리스트, 상세 조회 및 취소, 재전송 관리 어드민 개발
쿠폰 리스트, 상세 페이지 클라이언트 개발
확장프로그램 메인 피드에서 랜덤으로 캐시가 뜨도록 클라이언트 개발
캐시 적립 어뷰징 방지
적립 시 리캡차(v3) 체크해 봇 활용한 어뷰징 방지
서버에 sentry 추가하여 캐시 적립 어뷰징, 쿠폰 전송 실패 등 모니터링
[서플 - 어드민/서버] 사내 뉴스레터 슬랙봇 '서플타임즈' 개발
[결과]
약 15명의 사내 직원들에게 매일 3개의 포스트 전송 (휴일 제외)
[개발 배경]
사내 직원들의 콘텐츠 리뷰를 장려하기 위해 개인 메시지로 일정 시각에 포스트 보내는 슬랙봇 개발
[개발 과정]
Slack Review Bot API 개발. 어드민에서 슬랙봇에 가입할 수 있도록 Slack OAuth 개발.
리뷰어의 선호 카테고리 지정해 개발자에게는 개발 콘텐츠, 그 외 리뷰어에게는 트렌드 콘텐츠 전송.
AWS 코드 빌드로 스케줄러를 설정해 리뷰어에게 매일 포스트 3개 전송. 전송 실패 시 채널에 알림.
[서플 - 클라이언트] 다크모드 개발
[결과]
서버사이드 렌더링에서도 화면 깜박임 없이 렌더링할 수 있도록 다크모드 개발
[개발 과정]
스크립트가 실행될 때까지 HTML 렌더링 안되는 점 활용, 컬러모드 설정하는 인라인 스크립트 주입
다크모드, 라이트모드 스타일에는 css variable을 사용해 컬러모드 변수가 바뀌면 바로 화면에 적용
[서플 - 서버] 콘텐츠 수급을 위한 스크레이퍼 개발
[결과]
약 30개 도메인에 대한 스크레이퍼 개발
일별 평균 70개의 콘텐츠 크롤링
[개발 과정]
og-scraper, cheerio, 서비스 API 등으로 도메인 별 스크레이퍼 개발
메시지큐 방식으로 DB에 폴링, DB에 크롤링된 링크가 쌓이면 해당 링크의 페이지를 스크레이핑
commander 라이브러리로 scrape 커맨드 개발
AWS의 lightsail 인스턴스에 pm2로 실행하여 백그라운드에서 상시 스크레이핑할 수 있도록 개발
사용 기술
PostgreSQL Prisma GraphQL Express.js React Next.js TypeScript Material UI ElasticSearch

링커리어(Site Link)

2019. 8 ~ 2020. 9
서버, 프론트 엔드, 어드민 개발
서비스 소개
대학생, 취준생을 위한 대외활동, 공모전, 채용 공고 사이트.
[링커리어 - 클라이언트] PWA, TWA 프로젝트 개발
[결과]
PWA 웹앱 개발
안드로이드 앱에서 CustomTab 기반의 프로토콜 사용해 TWA 프로젝트 웹앱 이용 가능
[개발 배경]
모바일에서의 접근성, 오프라인 동작을 위해 PWA 제작
모바일앱에 대한 지속적인 수요, 서비스 접근성을 높이기 위한 안드로이드 앱 개발 진행
[개발 과정]
팀원들과의 PWA 스터디를 통해 사전 준비 후, 실제 업무에서 PWA로 제작
Cordova, Ionic capacitor, TWA, Webview 등 웹앱 기술조사 후 TWA 채택
PWA로 만들었던 웹앱을 TWA 프로젝트로 만들어 안드로이드 앱에서 접근 가능하도록 개발
[링커리어 - 서버/클라이언트/어드민] 레거시 기술 대체
[결과]
마이페이지, 기관회원 등록 페이지를 제외한 페이지에서의 서버, 클라이언트 기술 스택 대체
Django, CoffeeScript, 제로보드 등 레거시 기술을 Typescript, Node, GraphQL 등으로 대체
[개발 배경]
장기적인 관점에서 인재 채용, 코드의 유지보수, 기술 커뮤니티 지속성 등을 고려해 기술 대체 결정
[개발 과정]
한꺼번에 진행하지 않고 몇 번의 스프린트로 나눠 기술 대체
Shopify의 graphql-design-tutorial을 번역 및 참고해 GraphQL 스키마 설계 API 작성
기존의 제로보드 커뮤니티는 Typescript, Node, GraphQL을 사용해 대체
Django, Coffeescript로 이루어진 검색페이지 기술 대체 / 개선된 디자인의 클라이언트 개발
Django, Coffeescript로 이루어니 메인페이지 기술 대체 / 광고 관련 어드민, 서버, 클라이언트 개발
사용 기술
MySQL GraphQL Express.js Sequelize React Next.js TypeScript Material UI React Admin

EDUCATION

2014. 3 ~ 2019. 8
한양대학교 ERICA 광고홍보학과