미리보기

1. AEZIS - 오픈소스 관리 솔루션

2023년 3월 ~ 유지보수 중

오픈 소스 소프트웨어의 활용이 증가함에 따라 발생할 수 있는 보안 취약점 문제를 사전에 탐지하고 관리하기 위한 솔루션으로 조직의 소프트웨어 개발 과정에서 발생 가능한 리스크를 줄이고, 안전한 오픈 소스 활용 환경을 제공하는 것을 목표로한 서비스입니다.

기여한 부분

• UI/UX 설계 및 공통 컴포넌트 개발

  • Figma를 활용해 페이지별 UI/UX를 설계하고, 디자이너와 협업하여 주요 UI 컴포넌트(버튼, 입력창 등)의 가이드를 정의함으로써 서비스 전반의 UI 일관성과 사용성 향상에 기여

  • 모달, 버튼, 필터 등 공통 컴포넌트 개발 및 중앙화 → 개발 생산성 향상 및 유지보수 효율 증대

  • Responsively App을 활용해 여러 디바이스 해상도에서 화면을 크로스체크하며 반응형 웹 UI 구현

• 데이터 시각화 및 기술 도입

  • 오픈소스 라이브러리 및 패키지의 취약점 정보를 그래프 형태로 시각화한 대시보드 제공

  • Recharts 라이브러리를 활용하여 Bar Chart, Pie Chart 그래프 컴포넌트 개발

• 성능 최적화 및 유지보수

  • 팀 내 TanStack Query 도입 및 전파 → 서버 상태 캐싱을 통해 화면 전환 시 불필요한 API 재요청을 최소화함.

  • Chrome Performance 탭을 활용하여 렌더링 병목 지점 분석 후

    useMemo, useCallback 등을 적용해 컴포넌트 단위 최적화 수행 → 고비용 연산함수 및 컴포넌트 메모이제이션을 통한 화면 반응 속도 개선

  • 기존 컴포넌트에서 분산적으로 관리되던 상태관리 로직을 커스텀 훅으로 리팩토링하여 상태 관리 일관성을 확보하고, 중복되는 UI 로직을 분리해 재사용 가능한 컴포넌트로 전환하여 유지보수성과 확장성 향상

• 제품 개발 수익화 성공 및 실제 운영 경험

  • 디자이너, 기획자, 백엔드 개발자와 협업하여 기획~개발 전 과정을 경험하며 제품 완성도 및 일관성 확보에 기여

  • 농협은행, 농협중앙회, 미래에셋, 우리은행, 국민은행 기업 고객사에 성공적으로 배포

  • 고객사 피드백 기반의 기능 개선 및 지속적인 유지보수 진행

• 협업 및 커뮤니케이션

  • Figma 기반 디자인 핸드오프 및 피그마-개발간 커뮤니케이션 적극 참여

  • Jira 를 활용한 이슈 관리 및 스프린트 기반 협업 경험

사용 기술 스택
TypeScript, React, Context API, Tanstack-Query, Styled-Component, React-Select

2. RMS - 패키지 관리 솔루션

2024년 1월 ~ 유지보수 중

RMS는 저장소 관리 시스템으로 저장소를 통하여 패키지를 요청하고 관리하는 서비스입니다.
해당 프로젝트는 조직 내 오픈 소스 패키지의 안전한 관리와 배포를 지원하며, 패키지 취약점 검출 및 승인 프로세스를 포함한 전체 프로세스를 통합적으로 관리합니다.

기여한 부분

• 프론트엔드 전반 개발 담당

• 보안 / 패키지 검증 기능 추가

  • 보안 취약점 결과를 기반으로 한 패키지 승인 흐름 개발

  • 사용자 권한에 따른 접근 제어 및 역할 기반 UI 제공

• 복잡한 상태 처리 및 동적 처리

  • 저장소별 동적 폼 렌더링 구현 (e.g. 저장소 유형에 따라 다른 필드 동작)

  • FormData 기반의 파일 업로드 처리 및 유효성 검증 로직 설계

  • 다양한 패키지 요청 조건 대응을 위한 동적 필터 및 검색 시스템 개발

• 사용성 개선 / 복잡도 완화

  • Presentation & Controller 디자인 패턴을 적용하여 UI 로직과 비즈니스 로직을 분리하고, 공통 컴포넌트의 재사용성을 높여 페이지 개발 속도 향상

• 고객사별 운영 관점

  • 고객사별 상이한 정책(예: 패키지 승인 방식, 요청 항목, UI 요소 등)에 대응하기 위해 고객사 코드 기반의 유틸 모듈을 활용한 조건 분기 처리 구조 도입 → 이를 통해 하드코딩 없이 고객사 맞춤형 기능 제공이 가능, 단일 코드베이스에서 다수 고객사 요구사항에 유연하게 대응

사용 기술 스택
TypeScript, React, Context API, Tanstack-Query, Styled-Component, React-Select

Sulsul 프로젝트는 면접에 대한 두려움을 자신감으로 바꾸는 것을 목표로 시작된 취업 지원 플랫폼입니다.
AI 기술을 활용하여 면접 질문을 예측하고, 예측된 질문에 대한 답변에 피드백을 제공함으로써 사용자들이 면접 과정을 준비하며 자신감을 키울 수 있도록 도와주는 프로젝트입니다.

기여한 부분

• "백문백답 챌린지" 기능 개발

  • 면접 기출 100문항 제공 및 답변 작성 UI 구현 → 변동 가능성이 낮은 고정 질문 리스트는 SSG 렌더링 기법을 사용하여 초기 로딩 속도 개선

  • AI 답변 피드백 노출 및 답변 수정 기능 구현 → CSR 렌더링 기법 적용 적용, 빠른 반응성과 원활한 사용자 경험 제공

  • 다양한 카테고리로 구성된 질문 리스트를 사용자 진행 상황에 맞게 단계적으로 노출

• 응원 캐릭터 UI 및 인터랙션 구현

  • 사용자의 답변 작성률에 따른 동기부여 메시지를 제공하는 캐릭터 기능 개발

  • 캐릭터 상태 변화를 진행률과 연동시켜 개발

• 실시간 순위 분석 기능

  • 사용자가 각 질문에 답변을 제출할 때마다 상위 몇 %인지 실시간 피드백 제공 -> SSR 렌더링 기법 적용

• 진행률 Stepper 컴포넌트 개발

  • 각 카테고리별 챌린지 진행 상황을 시각화한 Stepper UI 컴포넌트 개발 →

    사용자의 현재 위치와 남은 항목을 직관적으로 확인 가능함

• 프론트엔드 중심의 사용자 경험 설계

  • 데스크탑, 노트북, 태블릿, 모바일 디바이스 환경에서 UI를 크로스체크하며 반응형 웹 서비스 구현

  • React + Zustand 기반 상태 관리 구조 설계 → 컴포넌트 간 데이터 흐름을 단순화

  • 스켈레톤(Skeleton) UI 도입

    • 데이터 로딩 중 사용자 경험을 고려하여 스켈레톤 컴포넌트 구현

    • 답변 리스트, 캐릭터 영역 등 주요 화면에 적용하여 로딩 시 깜빡임 제거 및 이탈률 감소

사용 기술 스택
Next, TypeScript, React, Tanstack-Query, Tailwind CSS, Zustand

깃헙 주소: https://github.com/sulsulsulsul/sulsul
프로젝트 주소: https://www.sulsul-interview.kr/