yurim.kim

Hello, I'm

김유림, Frontend Developer

고민보다 실행하며 문제를 해결합니다.
사용자의 일상에 편리함과 실질적인 가치를 더하는 경험을 만듭니다.

01 · About

사용자 경험을 빚는 프론트엔드 개발자

흙을 빚던 도예과 학생에서, 사용자 경험을 빚어내는 프론트엔드 개발자로. 새로운 영역에도 망설임 없이 도전하며, 기능과 디자인, 기술과 감성의 균형을 맞춘 UI/UX를 만듭니다. 빠르게 변하는 기술 환경 속에서도 유연하게 대응하고, 사용자의 일상에 실질적인 가치를 더하는 경험을 만들어갑니다.

01

실행력

고민보단 실행. 작은 실행이 큰 변화를 만든다는 믿음으로 새로운 기술과 영역에 망설임 없이 도전합니다.

02

문제 해결

단순한 기능 구현을 넘어 사용자 경험과 비즈니스 임팩트를 함께 고려하며 주도적으로 문제를 해결합니다.

03

협업

백엔드, 기획자와 적극적으로 커뮤니케이션하며 화면 구조를 설계하고 개선 방향을 함께 제안합니다.

02 · Skills

Skills

Frontend

React
Next.js
TypeScript
JavaScript
HTML
CSS
Sass
Less
Tailwind CSS
GraphQL
jQuery
PHP

State Management

Redux
Zustand
Recoil
Apollo Client

Tools & Collaboration

Figma
Photoshop
Illustrator
Jira
Confluence
03 · Career

Career

캐치시큐

Front-End Developer

2024.06 ~ 재직중

ReactNext.jsTypeScriptZustandReduxTailwind CSSStyled-componentsChart.js

환경 · AWS / NCP 운영, REST API 연동

협업 방식 · 기능 단위 목적 조직(스쿼드) 내 프론트엔드 파트 주도, 기획/디자인/백엔드와 API 스펙 선제적 조율 및 UI/UX 프로토타이핑 커뮤니케이션 주도

01

결제 및 인증 아키텍처 개선

비즈니스 핵심 로직 담당
내용
라이선스 구매, 정기 구독 관리, PG사(KG이니시스) 결제 및 본인 인증 연동 모듈 개발
최적화
REST API 기반 비동기 결제 처리 흐름 최적화 및 사용자 이탈 방지를 위한 단계별 예외 처리 시나리오 설계
성과
결제 파이프라인 재구성을 통한 사용자 이탈 구간 최소화, 결제 성공률 및 인증 안정성 대폭 개선
02

SSO 로그인 및 2FA 인증 구현

내용
고객사 계정 시스템과 연동한 SSO 로그인 기능 개발, EMAIL, OTP 인증번호 기반 2FA 플로우 구현, 세션 연장 로직 개선
최적화
Access/Refresh 토큰 갱신 및 세션 만료 처리 로직 설계, 인증 실패·재시도 상황에 대한 예외 처리 강화
성과
통합 로그인 환경 구축으로 사용자 접근성 개선 및 이중 인증 도입을 통한 서비스 보안 등급 강화
03

Admin 페이지 개발 및 서비스 대시보드 고도화

내용
캐치시큐 어드민 페이지 신규 개발, 서비스 대시보드 개선을 위한 Chart.js 기반 통계 대시보드 및 데이터 관리 시스템 구축
최적화
복잡한 대용량 로그 데이터 탐색(조건별 검색/필터/컴포넌트 추상화) UX 개선 및 엑셀 다운로드 최적화
성과
어드민 페이지 신규 구축 및 운영 담당자의 데이터 탐색·가시성 효율 극대화, 복잡도 해소
04

대용량 데이터 처리 및 렌더링 성능 최적화

내용
개인정보 대용량 데이터(CSV 기반 최대 10만 건) 비동기 업로드/파싱 처리 파이프라인 구현
최적화
브라우저 렌더링 성능 향상을 위한 Reflow/Repaint 최소화 작업(React.memo 및 컴포넌트 격리) 적용, Skeleton UI(HOC) 설계를 통한 API 응답 지연 구간 체감 로딩 속도 최적화
성과
대용량 핸들링 시 브라우저 메인 스레드 병목 해결, 안정적인 대용량 처리 UI 구현
05

보안 컴플라이언스(ISMS-P, CSAP) 대응 및 인증 구조 고도화

내용
API 요청 헤더 보안 강화, 토큰 기반 웹 스토리지 보안 격리 및 역할 기반(Role-based) 접근 제어 구현
성과
보안 감사 표준 규격 대응 만족, 유저 인증 흐름의 일관성 및 유지보수성 확보
06

글로벌 확장 대비 다국어(i18n) 아키텍처 전면 도입

내용
i18n 라이브러리 기반 800개 이상 컴포넌트/페이지의 번역 상태 관리 구조 설계 및 자동화 가이드 수립
성과
다국어 번역 비즈니스 로직 분리로 재사용성 및 글로벌 확장 기반 마련
07

외부 협력사 이기종 통합 보안 솔루션 개발

내용
타 보안 기업과의 협업을 위한 단일 SSO 연동 및 연합 데이터 시각화 대시보드 개발, API 정합성 조율
성과
기술 협업 솔루션의 완성도를 인정받아 통합보안 관련 시상식 '은상' 수상 기여

플랫큐브

Front-End Intern

2023.12 ~ 2024.05

ReactNext.jsTypeScriptGraphQL
01

무신사 내부 시스템 개발

내용
무신사 내부 가상 환경 및 SSO 로그인, GraphQL API 연동 기반 무한 스크롤 시스템 개발
성과
PC/Mobile 반응형 레이아웃 다변화 대응을 포함한 내부 시스템 100% 단독 개발 성과 달성
02

메디컬 소프트 및 패션비즈 웹사이트 리뉴얼

내용
미디어/의료 정보성 레이아웃 마크업 구조 정비 및 시각적 사용성 개선
성과
시맨틱 마크업 설계를 통한 웹 접근성(WCAG) 표준 준수 및 개선, 어드민 커스터마이징이 가능한 유연한 레이아웃 구조 구현
04 · Projects

Projects

PickS

PickS

AI 쇼핑 큐레이터

상품 링크만 붙여넣으면 AI가 비교·추천·리뷰 분석까지 제공하는 쇼핑 큐레이션 서비스입니다. 네이버 쇼핑 API로 실제 상품 데이터를 연동하고, Gemini API 기반으로 상황별 큐레이션과 구매 판단을 돕는 리포트를 생성합니다.

Next.jsTypeScriptFirebaseZustandGemini API
HueFlow

HueFlow

컬러 하모니 & 그래디언트 생성 툴

컬러 하모니 생성, 그래디언트 빌더, AI 테마 검색을 한 화면에서 사용할 수 있는 컬러 도구입니다. 6가지 조화 알고리즘 기반 팔레트를 생성하고, Gemini 2.5 Flash에 자연어로 팔레트를 요청할 수 있습니다.

Next.jsTypeScriptGemini API
One Bite JP

One Bite JP

한 입씩 배우는 일본어 앱

단계별 입문 커리큘럼으로 일본어를 학습하는 React Native 앱입니다. 단어 맞추기·빈칸 채우기 퀴즈, 출석 체크, 오답노트 기능으로 학습 습관을 관리할 수 있습니다.

React NativeTypeScript
Kanban Board

Kanban Board

드래그 앤 드롭 업무 관리 앱

React와 TypeScript로 구현한 칸반 보드 웹 애플리케이션입니다. 할 일·진행 중·완료 단계로 카드를 관리하며, 드래그 앤 드롭으로 직관적인 업무 흐름을 제공합니다.

ReactTypeScript
My Wedding Invitation

My Wedding Invitation

모바일 청첩장 제작 웹앱

사용자가 직접 모바일 청첩장을 생성할 수 있는 웹 애플리케이션입니다. 다양한 템플릿 기반의 맞춤형 디자인과 텍스트 입력, 반응형 UI를 제공합니다.

ReactStyled-Components
Todo All

Todo All

현대인의 스케줄 관리 투두리스트

Supabase 백엔드 연동으로 사용자 인증 및 일정 CRUD를 구현한 일정 관리 웹 애플리케이션입니다. 상태 관리는 Zustand를 활용했습니다.

ReactSupabaseZustand
Virtual Trading App

Virtual Trading App

모의 투자 코인 거래 웹앱

실제 자산 없이 가상의 KRW 잔고로 코인 매수·매도를 연습하는 모의 투자 거래소 웹앱입니다. 실시간 시세, 캔들 차트, 호가창과 지정가·시장가 주문을 제공합니다.

ReactTypeScript
Nyang-BTI

Nyang-BTI

나는 어떤 고양이 유형일까?

React Native(Expo) 기반 고양이 MBTI 테스트 앱입니다. 12가지 질문으로 16가지 고양이 유형 결과를 제공하며, 카카오톡 공유 기능을 지원합니다.

React NativeExpoTypeScript
05 · Contact

Contact