프론트엔드 개발자

김연정

사용자 경험(UX)에 대한 깊은 관심을 바탕으로, 다양한 직군의 팀원들과 협업하여 더 나은 제품을 만들어가는 것을 좋아합니다. 또한, 단순한 기능 구현에 그치지 않고 코드를 어떻게 개선할 수 있을지 늘 고민하며 품질 높은 개발을 추구합니다.

성실함

책임감

꼼꼼함

효율적

열정적

정보처리기사

Sulsul 프로젝트는 면접에 대한 두려움을 자신감으로 바꾸는 것을 목표로 시작된 취업 지원 플랫폼입니다. AI 기술을 활용하여 면접 질문을 예측하고, 예측된 질문에 대한 답변에 피드백을 제공함으로써 사용자들이 면접 과정을 준비하며 자신감을 키울 수 있도록 도와주는 프로젝트입니다.<hr>기여한 부분<ul><li>"백문백답 챌린지" 기능 개발<ul><li>면접 기출 100문항 제공 및 답변 작성 UI 구현</li><li>AI 답변 피드백 노출 및 답변 수정 기능 구현</li><li>다양한 카테고리로 구성된 질문 리스트를 사용자 진행 상황에 맞게 단계적으로 노출</li></ul></li><li>응원 캐릭터 UI 및 인터랙션 구현<ul><li>사용자의 답변 작성률에 따른 동기부여 메시지를 제공하는 캐릭터 기능 개발</li><li>캐릭터 상태 변화를 진행률과 연동시켜 개발</li></ul></li><li>실시간 순위 분석 기능<ul><li>사용자가 각 질문에 답변을 제출할 때마다 상위 몇 %인지 실시간 피드백 제공</li><li>진행률 기반의 동기부여 요소로 사용자 참여 유도</li></ul></li><li>진행률 Stepper 컴포넌트 개발<ul><li>각 카테고리별 챌린지 진행 상황을 시각화한 Stepper UI 컴포넌트 개발</li><li>사용자 현재 위치와 남은 항목을 직관적으로 확인 가능하도록 디자인 설계</li></ul></li><li>프론트엔드 중심의 사용자 경험 설계<ul><li>다양한 디바이스에 대응하는 반응형 웹 서비스 구현</li><li>React + Zustand 기반 상태 관리 구조 설계</li><li>스켈레톤(Skeleton) UI 도입<ul><li>데이터 로딩 중 사용자 경험을 고려하여 스켈레톤 컴포넌트 구현</li><li>답변 리스트, 캐릭터 영역 등 주요 화면에 적용하여 로딩 시 깜빡임 제거 및 이탈률 감소</li></ul></li></ul></li></ul>사용 기술 스택 Next, TypeScript, React, Tanstack-Query, Tailwind CSS, Zustand<hr>깃헙 주소: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/sulsulsulsul/sulsul">https://github.com/sulsulsulsul/sulsul</a> 프로젝트 주소: <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.sulsul-interview.kr/">https://www.sulsul-interview.kr/</a>

Sulsul (술술) - AI 기반 취업 면접 지원 플랫폼

<h5>1. AEZIS - 오픈소스 관리 솔루션</h5>2023년 3월 ~ 유지보수 중 오픈 소스 소프트웨어의 활용이 증가함에 따라 발생할 수 있는 보안 취약점 문제를 사전에 탐지하고 관리하기 위한 솔루션으로 조직의 소프트웨어 개발 과정에서 발생 가능한 리스크를 줄이고, 안전한 오픈 소스 활용 환경을 제공하는 것을 목표로한 서비스입니다.<hr>기여한 부분<ul><li>UI/UX 설계 및 공통 컴포넌트 개발<ul><li>Figma를 활용하여 UI/UX 화면 설계 및 디자인 초안 제작, 컴포넌트 가이드 수립</li><li>모달, 버튼, 필터 등 공통 컴포넌트 개발 및 중앙화 → 개발 생산성 향상 및 유지보수 효율 증대</li><li>디자인 시스템 도입으로 UI 일관성 확보 및 반응형 레이아웃 구축</li><li>다양한 디바이스에 대응하는 반응형 웹 서비스 구현</li></ul></li><li>데이터 시각화 및 기술 도입<ul><li>오픈소스 라이브러리 및 패키지의 취약점 정보를 그래프 형태로 시각화한 대시보드 제공</li><li>Recharts 라이브러리를 활용하여 Bar Chart, Pie Chart 그래프 컴포넌트 개발</li><li>팀 내 TanStack Query 도입 및 전파 → 중복 API 호출 제거 및 응답 속도 30% 향상, 코드량 약 40% 절감</li></ul></li><li>성능 최적화 및 유지보수<ul><li>Chrome Performance 탭을 활용하여 렌더링 병목 지점 분석</li><li>useMemo, useCallback 등을 적용해 컴포넌트 단위 최적화 수행 → 화면 반응 속도 약 30% 개선</li><li>기존 상태 관리 로직을 간소화하고 컴포넌트 재사용성을 높여 유지보수 효율성 향상</li></ul></li><li>제품 개발 수익화 성공 및 실제 운영 경험<ul><li>해당 솔루션을 처음부터 디자인, 개발, 배포까지 경험</li><li>농협은행, 농협중앙회, 미래에셋, 우리은행, 국민은행 기업 고객사에 성공적으로 배포</li><li>고객사 피드백 기반의 기능 개선 및 지속적인 유지보수 진행</li></ul></li><li>협업 및 커뮤니케이션<ul><li>Figma 기반 디자인 핸드오프 및 피그마-개발간 커뮤니케이션 적극 참여</li><li>Jira 를 활용한 이슈 관리 및 스프린트 기반 협업 경험</li></ul></li></ul> 사용 기술 스택 TypeScript, React, Context API, Tanstack-Query, Styled-Component, React-Select<hr><h5>2. RMS - 패키지 관리 솔루션</h5>2024년 1월 ~ 유지보수 중 RMS는 저장소 관리 시스템으로 저장소를 통하여 패키지를 요청하고 관리하는 서비스입니다. 해당 프로젝트는 조직 내 오픈 소스 패키지의 안전한 관리와 배포를 지원하며, 패키지 취약점 검출 및 승인 프로세스를 포함한 전체 프로세스를 통합적으로 관리합니다.<hr>기여한 부분<ul><li>프론트엔드 전반 개발 담당</li><li>보안 / 패키지 검증 기능 추가<ul><li>보안 취약점 결과를 기반으로 한 패키지 승인 흐름 개발</li><li>사용자 권한에 따른 접근 제어 및 역할 기반 UI 제공</li></ul></li><li>복잡한 상태 처리 및 동적 처리<ul><li>저장소별 동적 폼 렌더링 구현 (e.g. 저장소 유형에 따라 다른 필드 동작)</li><li>FormData 기반의 파일 업로드 처리 및 유효성 검증 로직 설계</li><li>다양한 패키지 요청 조건 대응을 위한 동적 필터 및 검색 시스템 개발</li></ul></li><li>사용성 개선 / 복잡도 완화<ul><li>Presentation &amp; Controller 디자인 패턴을 적용하여 UI 로직과 비즈니스 로직을 분리하고, 공통 컴포넌트의 재사용성을 높여 페이지 개발 속도 향상</li></ul></li><li>고객사별 운영 관점<ul><li>고객사별 상이한 정책(예: 패키지 승인 방식, 요청 항목, UI 요소 등)에 대응하기 위해 고객사 코드 기반의 유틸 모듈을 활용한 조건 분기 처리 구조 도입 → 이를 통해 하드코딩 없이 고객사 맞춤형 기능 제공이 가능, 단일 코드베이스에서 다수 고객사 요구사항에 유연하게 대응</li></ul></li></ul>사용 기술 스택 TypeScript, React, Context API, Tanstack-Query, Styled-Component, React-Select