손지원 · Frontend Developer

Introduction

기술과 비즈니스를 함께 보는 프론트엔드 개발자입니다. React·Next.js·Astro 기반의 B2C/B2B 서비스를 만들어오면서, 기술적 완성도뿐 아니라 그 결과가 비즈니스 임팩트나 비개발자의 반복 업무 자동화로 이어지는지에도 관심을 두는 편입니다. 마케팅 운영 공수를 자동화로 풀어낸 네이버 카페 게시 파이프라인처럼, 비용·생산성에 닿는 작업에서 큰 보람을 느낍니다. 이상보다 현실적인 해결, 표면적 처리보다 근본 원인 추적, 그리고 명확한 커뮤니케이션을 일하는 원칙으로 삼고 있으며, 다양한 경험을 통해 유동적이고 넓은 시야를 가진 개발자로 성장해나가고자 합니다.

Experience

넛지헬스케어

프론트엔드팀 사원 · 2024.02 — 재직 중 (2년 3개월)

걷기 리워드 앱 ‘캐시워크’를 비롯해 비대면 심리상담 플랫폼 ‘트로스트’, 기업 임직원 EAP 서비스 ‘넛지 EAP’, 대학생·취준생 커리어 플랫폼 ‘링커리어’ 등 다수의 디지털 서비스를 운영하는 헬스케어·라이프스타일 기업. 이 가운데 트로스트·넛지 EAP·링커리어 세 개 서비스의 신규 기능 개발과 사용자 경험·성능·SEO 개선작업 등을 진행했으며, 레거시 서비스의 모던 스택 마이그레이션, 운영 어드민 신규 구축, 다중 레포 협업 등 폭넓은 영역에 기여. 기획·디자인·QA와의 다자간 협업을 이끌고, 장애 대응과 근본 원인 추적.

링커리어

프론트엔드팀 사원 · 2023.10 — 2024.02 (5개월)

대학생·취준생을 위한 채용 및 커뮤니티 플랫폼 ‘링커리어’(LINKareer)를 운영하는 커리어 IT 기업. 대외활동·공모전·인턴·신입 채용 정보부터 자기소개서·기업분석자료까지 취업 준비 전반의 콘텐츠를 제공하며, 10여 년의 대학생 커뮤니티(스펙업) 운영 경험을 바탕으로 폭넓은 사용자층을 확보해 온 서비스. 메인·biz 서비스의 사용자 경험·성능·SEO 개선 작업에 단기간 집중 기여.

크레이빙 콜렉터

프론트엔드 인턴 · 2023.01 — 2023.02 (1.5개월)

콜렉티브 셀렉트샵 웹사이트 ‘둘러보기’ 페이지를 단기 인턴십 프로젝트로 신규 개발하고 SEO 기반까지 정비. 기획·디자인 협업부터 상용 배포(collectiv.kr/browser)까지의 릴리즈 사이클을 단기간에 경험.

Projects

트로스트

2025.12 — 2026.04

정신건강 심리검사·상담 연결 B2C 플랫폼

Astro React Next.js TypeScript @tanstack/react-query Tailwind CloudFront Firebase Analytics

주요 성과 및 기여

★ 주요 성과

외부 Walla iframe 연동 ‘공황장애 자가진단’ 신규 개발 · 다중 레포 동시 상용 배포

배경

트로스트에 외부 Walla 검사지를 iframe으로 로드하는 ‘공황장애 자가진단’을 추가해야 했고, 기존 Next.js 심리검사와 별도로 Astro 레포에서 신규 작성 + 다중 레포 헤더/LNB 노출 작업이 필요했습니다.

해결

Walla iframe 컴포넌트 · 개인정보 입력 폼 · 검사 목록 · 결과 페이지 · SNS 공유 순서로 PR 단위 분리 구현
responseId 전달 요구사항을 iframe cross-origin 보안 정책으로 분석해 구현 불가 판정 후 외부 서비스 측 수정으로 방향 전환
다중 레포 헤더/LNB 추가 + CloudFront 경로 설정 조율 (공수 2시간)

성과

2026-02-26 다중 레포 동시 상용 배포 완료
PC 웹 / 모바일 웹 / 캐시워크 인앱 / 트로스트 별도앱 4개 진입점 모두 정상 동작 검증
결과 페이지 UI · 가로 스크롤 · 플로팅 UI 이슈 당일 핫픽스로 수정 완료

★ 주요 성과

트로스트 심리검사 시작/결과 페이지 전면 개편

배경

트로스트 심리검사가 검색·콘텐츠 유입은 강했지만 검사 후 다음 행동(커뮤니티·심리상담)으로의 전환 구조가 불명확했습니다. 단발성 테스트를 트로스트 서비스 전반의 탐색·전환 허브로 재정의하고, 누적 데이터 기반의 비교 플랫폼으로 만드는 1순위 작업이었습니다.

해결

심리검사 시작 페이지에 누적 참여자 수 · 평점/리뷰 요약 · 4종 롤링 배너(MMPI-2 · TCI · 도형심리 · 에니어그램) · 자주묻는 질문 신규 노출
심리검사 결과 페이지에 누적 참여자 백분위 · 연령/성별 점수 편차 · 동일 점수대 사용자 행동 통계(커뮤니티/ASMR/상담사 둘러보기 비율) 등 데이터 기반 개인화 영역 신규 구축
동일 키워드 커뮤니티 글 · 전문가 칼럼 · 상담사 리뷰 매칭 영역 신설로 검사 → 커뮤니티/상담으로 자연스러운 전환 동선 설계
심리검사 리뷰 시스템(별점·텍스트, 닉네임 마스킹·일 단위 셔플)과 결과 공유 기능 신규 개발
트로스트 자체앱 · 캐시워크 인앱 · PC/모바일 웹 환경별 동작 분기 처리
출시 후 Firebase 이벤트 누락을 다중 레포 단위로 추적·핫픽스 반영

성과

2026-03 상용 배포 완료 · 심리검사가 트로스트 서비스 전반의 진입 허브로 재설계됨
검사 결과를 커뮤니티/상담/사운드테라피로 연결하는 데이터 기반 추천 구조 확보
출시 후 발견된 Firebase 이벤트 누락 이슈를 빠르게 추적·핫픽스 반영하여 분석 데이터 정합성 회복

트로스트 홈·센터찾기 프론트 최적화

배경

트로스트 홈 페이지는 단순 배너까지 모두 React 하이드레이션이 동작해 JS 번들이 컸고, 이미지가 뷰포트 밖에서도 로딩되어 초기 로딩·스크롤 체감 속도가 느렸습니다. 병행으로 레거시 PHP 센터찾기 지면을 Astro로 이관하면서 Firebase 이벤트 누락 · 환경별 UI 차이 · 모바일 URL 중복 등 마이그레이션 공통 이슈도 정리해야 했습니다.

해결

동작 없는 배너(앱 다운로드 · 채널 구독 · A to Z 가이드)를 tsx에서 .astro로 전환해 브라우저 JS 처리량 감소
사운드 플레이어 · 커뮤니티 인기글 영역을 스크롤 시점에 로딩 (HTML 유지로 SEO 영향 없음)
바로가기 아이콘 · 유튜브 썸네일 lazy loading + 자리 사전 확보로 밀림 현상 방지
레거시 PHP 센터찾기 지면을 Astro로 이관 + QA 대응
Firebase 이벤트 · 환경별 UI 차이 · 모바일 URL 중복 등을 포함한 ‘PHP 마이그레이션 공통 체크리스트’ 직접 작성 → 팀 자산화

성과

2026-02-26 상용 배포 완료 · 파트장 ‘체감상 빨라진 것 같습니다’ 피드백 수령
PageSpeed 리포트 공유 + 팀에 추가 최적화 방향 제안
마이그레이션 체크리스트 팀 자산화로 향후 공수 표준화 기반 확보

넛지 EAP

2026.01 — 2026.04

기업 직원 정신건강관리·약물 정보 제공 B2B SaaS 플랫폼

Next.js React TypeScript styled-components REST API Firebase Analytics

주요 성과 및 기여

복용약 찾기 & 약물 의존도 자가체크 페이지 마이그레이션 + SEO 최적화

배경

트로스트의 복용약 찾기·약물 의존도 자가체크 페이지를 Nudge EAP 도메인으로 이관해야 했고, 부산시 교육청 대응용 추천 상담사 노출 로직(1.5일 별도 공수)도 병행해야 했습니다.

해결

canonical URL · title · 키워드 등 SEO 메타데이터를 Nudge EAP 도메인 컨텍스트에 맞게 재정의
부산시 교육청 대응용 추천 상담사 노출 로직 구현 (1.5일)
일정 내 마이그레이션 + SEO 개선 + 추가 요구사항 통합 상용 배포

성과

Nudge EAP 도메인으로 페이지 마이그레이션 완료 · 교육청 요구사항 충족

링커리어

2023.07 — 2025.12

대학생·기업을 잇는 채용 및 커뮤니티 플랫폼 (B2B/B2C)

Next.js React TypeScript GraphQL Apollo Client styled-components MUI react-dnd AWS Lambda Serverless Framework Puppeteer Redis CloudFront

주요 성과 및 기여

★ 주요 성과

간편지원 & 지원자 관리 신규 기능

배경

링커리어 채용 비즈니스의 핵심 흐름인 ‘지원자 → 기업’을 새로 잇는 대형 신규 기능. B2C 지원자 측의 간편지원 UX와 B2B 채용 담당자 측의 지원자 관리 어드민을 동시에 설계·구현해야 했고, 메인(B2C)과 biz(B2B) 레포에 흩어진 진입점을 일관된 UX로 통합하는 것이 핵심 도전이었습니다.

해결

FE 메인 개발자로 2.5개월간 단독 드라이브 — 기획·디자인·백엔드·QA 다자간 협업 주도
지원자 측 간편지원 흐름과 기업 측 지원자 관리 어드민을 단일 책임자로 일관된 UX로 통합
다중 레포 동시 QA 사이클 운영 → 이슈 수정 → 동시 상용 배포 진행
프로젝트 종료 후 후임이 이어받아 운영 가능한 형태로 인수인계 문서를 직접 작성

성과

2.5개월 장기 신규 기능을 일정·품질 이슈 없이 메인 개발자로 완주 · 메인·biz 레포 동시 상용 배포
양면 시장(B2C 지원자 + B2B 채용 담당자) 핵심 흐름을 단일 FE 책임자가 일관성 있게 통합
사용성 테스트(콘텐츠 에디터 17명) 평균 만족도 5점 만점 4점대 · 외부 채용 사이트 대비 “훨씬 편리하다” 응답 압도적 다수
운영 단계에서 저성과 공고 1:1 컨택 진행 시 지원 전환율 10% 이상 달성 · 한진 글로벌 · fns inc 등 해외 인턴 모집 주요 기업의 간편지원 전용 사용 사례 발생
인수인계 이후 회사 핵심 기능으로 자리잡아 인스타그램·스티비·앱푸시·채용봇 등 8개 채널 동시 마케팅 캠페인의 중심 자산으로 활용
출시 후 일별 지표 대시보드 + 슬랙 리포팅 운영 체계 구축 · 전사 1순위 디벨롭 과제로 지정되어 후속 디벨롭 지속

★ 주요 성과

업무 자동화봇 9종 신규 개발·장기 운영

배경

공기업·지방공기업·대학생 커뮤니티 등 다수 채널의 채용공고·자소서·합격후기를 주기적으로 크롤링해 스펙업·공취사 네이버 카페에 자동 게시하는 봇을 신규 개발·운영해야 했으며, 누락률 개선과 마케팅팀의 반복 수동 게시 업무 제거가 필요했습니다.

해결

Serverless Framework + AWS Lambda + Puppeteer 기반 크롤링·자동 게시 파이프라인 구축·확장
봇 9종 운영 — 공취사: 잡알리오 / 나라일터 공무원 / 나라일터 무기계약직 / 클린아이 / 공기업 자소서 봇 5종, 스펙업: 미래내일 일경험 / 링커리어 공고봇 / 합격후기 봇 / 자소서 봇 4종
Redis 기반 중복 방지 · 실패 재시도 로직으로 게시 품질 안정화
Lambda 타임아웃 · 메모리 튜닝, 모집일 기준 정렬 로직 개선 제안으로 누락률 감소

성과

9종 봇 안정 운영 · 누락률 개선 · 게시 안정성 확보
마케팅팀 반복 수동 게시 업무 제거 · 운영 인건비 절감

자소서 관리 페이지 전면 개선

배경

링커리어 메인의 자소서 관리 페이지를 리스트 UI에서 칸반 대시보드로 전환하고, 자소서 카드 팝업(메모·첨부파일·일정 통합) · 모바일 대응 · 기간·상태·정렬 필터링 · 무한스크롤 환경 DND까지 동시에 구현해야 했으며, 메인·커뮤니티 레포 동시 상용 배포와 QA 사이클 전체 책임이 포함되었습니다.

해결

Apollo 캐시 활용 — optimisticResponse로 상태 변경(진행중↔합·불) 즉시 UI 반영·실패 시 롤백, cache.updateQuery + immer produce로 새 자소서 생성 시 백엔드가 자동 전환하는 CUSTOM 정렬 상태를 프론트 캐시에 동기화하여 UI 미반영 이슈 근본 해결
react-dnd-scrolling 도입으로 무한스크롤 환경에서 DND 스크롤 추적 실패 이슈 해결
sessionStorage + Apollo cache 결합으로 합·불 필터 상태 영속화 (페이지 이동/새로고침 시 유지)
일정 지연 발생 시 PM·파트장과 투명한 일정 재조율 (2/18 → 2/20 오전) 및 당일 승인

성과

3개월 대형 프로젝트의 메인 개발자로 단독 드라이브 (파트장·QA와 공동 협업)
2025-02-19 테스트 서버 배포 · 2025-04-11 메인 + 커뮤니티 동시 상용 배포 완료
무한스크롤 DND · Apollo CUSTOM 캐시 · sessionStorage 필터 영속화 등 기술 난제 3건 근본 해결
디자이너 13건 이상 협의 · 기획자 정렬 기준 정의 · 백엔드 API 개발 순서 조율 · QA 15건 사이클을 메인 개발자로 주도

링커리어 메인·biz 커스텀 폰트 제거

배경

링커리어 메인·biz·커뮤니티 3개 도메인에서 NotoSans 등 커스텀 폰트 다운로드에 약 5MB의 네트워크 리소스가 소비되고 있었고, 폰트 로드 시 화면이 바뀌는 레이아웃 shift 현상도 있었습니다. 초기 로드 속도·SEO 성능과 UX를 동시에 개선해야 했으며, Windows 환경에서는 시스템 폰트가 Mac과 달라 가독성 저하 우려가 있었습니다.

해결

메인 · biz 레포에서 커스텀 폰트 제거 + 시스템 폰트 교체 (PR 단위로 분리 머지)
Windows 가독성 저하 대응 — width / font-weight 등 스타일 보정 (예: font-weight 500→700)
백엔드 배포 순서 이슈로 인한 Revert 및 재머지 대응
운영팀 UX 검토 주도 — 전/후 스크린샷을 Notion으로 정리하여 마케터·운영팀 의견 수렴
OS 분기 아키텍처 제안 — Windows는 NotoSans 로드, Mac은 시스템 폰트 적용

성과

네트워크 리소스 약 5MB 감량 · 초기 로드 속도 개선으로 SEO 성능 개선 기반 확보
레이아웃 shift 제거로 초기 화면 전환 UX 개선
유저 수가 가장 많은 커뮤니티 도메인은 유지, 메인·biz만 제거하는 UX 균형 결정 주도
OS별 최적 경험을 위한 분기 아키텍처 설계로 macOS 성능 + Windows 가독성 양립

자소서 만능 검색 페이지 MUI 제거 · SSR/canonical 개선으로 SEO 기반 강화

배경

자소서 만능 검색 페이지가 MUI(Material UI) 기반으로 작성되어 번들 크기·SEO 측면의 개선이 필요했고, 크롤봇의 페이지 수집을 지원하기 위한 SSR 및 canonical 태그 적용도 함께 요구되었습니다.

해결

MUI → styled-components 마이그레이션으로 라이브러리 의존성 제거 · 번들 축소
PM 회귀 검증 → 리포트된 이슈 7건 전건 수정 후 재배포
SSR 개선 후속 참여 · 자만검 simple=true 쿼리 파라미터 정리 + canonical 단일화 작업 단독 진행
성능 개선 → QA → SEO 정비 순으로 단계별 릴리즈 분리

성과

2025-06-11 MUI 제거 상용 배포 · 2025-07-03 SSR 개선 상용 반영 · 2025-07-22 canonical 정리 상용 반영
배포 직후 1~2개월 내 자만검 페이지가 상위 유입 키워드(인턴 · 한국산업인력공단 · 한국수력원자력 · 토스 · 지원동기 · 성격장단점 등) 다수 신규 진입 — ’25년 8월 1주차 기준 전주 대비 클릭 수 증가 흐름 마케팅팀이 별도 공유
팀장 피드백 — “자만검 데이터를 크롤봇이 더 수월하게 크롤링할 수 있어 자만검 콘텐츠 유입률 상승 기대”

기업분석자료 SEO 개선

배경

기업분석자료 페이지의 SEO 성능을 개선해야 했으며, 기존 이미지 + AI 파싱 파이프라인의 구조적 한계 진단과 대안이 필요했습니다.

해결

기존 파이프라인의 구조적 한계 분석
‘CMS PDF 업로드 시점에 AI 파싱’이라는 대안 아키텍처를 팀에 제안
SSR 개선 · 크롤봇 분기 · 비로그인 접근 지원 등 후속 PR 상용 반영

성과

아키텍처 레벨의 개선 제안 및 구현 · SEO 기반 강화

Skills

Languages: TypeScript, JavaScript
Frameworks: React, Next.js, Astro
State / Data: @tanstack/react-query, Apollo Client, GraphQL, REST API
Styling: Tailwind CSS, styled-components, MUI
Infra / Ops: AWS Lambda, Serverless Framework, CloudFront, Puppeteer, Redis, Firebase Analytics
Tools: Git, Figma, Zeplin, Slack, Notion, Chrome DevTools

Education

대덕소프트웨어마이스터고등학교

2021.03 — 2024.02

임베디드 소프트웨어과

Certifications & Military

Certifications: 정보처리기능사
Military: 산업기능요원 복무 중