미리보기

주제

• 디지털 명함 공유 아카이빙 서비스

기획

• 기존의 명함은 정보가 적고 딱딱해서 어려워요, 더 많은 정보를 알고 싶어요의 니즈를 해결하기 위해 기획

기술스택

• Next.js ,TypeScript , Tailwind CSS , Zustand

팀 인원

• 웹 디자이너 3명

• 프론트엔드 4명

• 백엔드 3명

📖 기능 담당

• 소셜 로그인(카카오 , 구글) 구현 및 설계

• 명함 공유 애니메이션 담당

• 명함 공유 저장 페이지 , 받은 명함 상세 페이지 담당

• 에러 바운드리 구축

📖 ErrorBoundary 설계 및 구축 (링크)

• 팀원별 상이한 에러 핸들링으로 인한 코드 가독성 저하 및 런타임 에러 증가 문제 해결

• API 컨테이너별 국소 ErrorBoundary와 서비스 전체 GlobalBoundary 이중 구조 설계

• 런타임 에러 발생률 현저히 감소, 에러 핸들링 코드 가독성 개선

📖 Config 기반 코드 작성 (링크)

• UI 컴포넌트 속성값 하드코딩으로 인한 디자인 변경 시 다중 파일 수정 문제 해결

• 중앙 집중식 config 파일로 UI 속성값(색상, 크기, 액션) 통합 관리 구조 구축

• 디자인 시스템 변경 시 유지보수 시간 단축, 컴포넌트 재사용성 증가로 개발 속도 향상

📖 Framer-Motion 활용으로 인터렉션 개선 (링크)

• 정적 명함 화면으로 인한 사용자 이탈률 증가 문제를 해결하기 위해 동적 인터랙션 도입

• 명함 낙하 애니메이션으로 실제 명함 전달 경험 구현, 몰입감 있는 UX 설계

• 런칭데이 50명 중 90% 이상 긍정 반응, 기능 의도 전달 효과성 대폭 향상

📖 Swiper 라이브러리 커스터마이징을 통한 홈 화면 UX 향상 (링크)

• 정적 리스트 형태의 명함 목록으로 인한 사용자 체류 시간 감소 및 이탈률 증가 문제 해결

• Swiper 라이브러리 커스터마이징으로 이전/다음 명함이 살짝 보이는 직관적 슬라이드 UI 구현

• 홈 화면 체류 시간 및 사용자 만족도 향상, 자연스러운 탐색 유도 효과 달성

주제

• 스터디 그룹 관리 서비스

기획

• 알고리즘 스터디의 GitHub 활동 및 벌금 관리의 비효율성을 해결하고, 분산된 참여도와 자료 관리를 통합하기 위해 집중형 스터디 플랫폼을 기획

기술스택

• Next.js ,TypeScript , Tailwind CSS , Zustand

팀 인원

• 프론트엔드 1명

• 백엔드 1명

📖 기능 담당

• 소셜 로그인(카카오 , 구글) 구현 및 설계

• 스터디 그룹 생성 및 관리

  • 그룹 초대 및 멤버 역할 관리

  • 스터디 일정 대시보드 , 캘린더 기능

• 실시간 채팅 및 자료 공유

  • 그룹 채팅 기능

  • 학습 자료 공유 및 저장 기능

📖 인증 시스템 강화를 위한 미들웨어 구현

• 비인증 사용자의 보호된 페이지 직접 URL 접근 가능한 보안 취약점 해결

• Next.js 미들웨어로 경로별 권한 분리 및 자동 리다이렉트 로직 구현

• 인증 흐름 일관성 확보, 접근 제어 시스템 구축으로 서비스 보안성 강화

📖 페이지 로딩 성능 최적화

스켈레톤 UI 및 캐싱으로 로딩 성능 개선

• 데이터 집약적 페이지의 체감 로딩 시간 증가로 인한 사용자 이탈 문제 해결

• 스켈레톤 UI와 React Query 캐싱 전략으로 로딩 UX 및 반복 방문 속도 개선

• 체감 로딩 시간 단축, 페이지 재방문 시 로드 속도 향상으로 사용자 경험 개선

📖 파일 업로드 UX 개선

드래그 앤 드롭 파일 업로드 시스템 구현

• 기존 파일 업로드 방식의 복잡한 사용자 경험 및 다중 포맷 지원 부족 문제 해결

• react-dropzone 활용한 직관적 드래그 앤 드롭 인터페이스 및 다중 포맷 지원 구현

• 파일 제출 과정 간소화, 사용자 업로드 편의성 및 만족도 향상

🚨 트러블 슈팅

Safari/iOS 환경 로그인 오류 해결

• Safari 및 iOS에서만 refreshToken 쿠키 수신 실패로 로그인 기능 작동 불가 문제 발생

• 크로스 도메인 쿠키 정책 분석 후 프론트엔드/백엔드 도메인 통일로 해결

• Safari/iOS 환경에서 로그인 기능 정상화, 브라우저별 보안 정책 대응 경험 습득

주제

• 검색어 기반 AI 종목 추천 서비스

기획

• 키워드 기반 종목 검색의 번거로움을 해소하고자, 검색량 추이와 주가 변동의 연관성을 바탕으로 키워드만으로 종목, 시세, 검색량을 한눈에 비교할 수 있는 서비스를 기획

기술스택

• React , Redux tookit ,Styled-component

팀 인원

• 프론트엔드 3명

• 백엔드 2명

📖 기능 담당

• 사용자가 입력한 검색 키워드와 연관된 종목 리스트 제공

• 시세 및 검색량 비교 차트 제공

  • 네이버, 구글, 인스타그램 등 소셜 검색량 추이 시각화

  • 검색한 종목의 시세 변동 및 네이버 검색량 비교 차트 제공

• 랜딩페이지 디자인 구현

📖 외부 API 통합 안정성 개선

• Google Translate API 차단으로 인한 일 5-10회 서비스 중단 문제를 해결하기 위해 API 전환 결정

• 일일 1,000회 한도 Naver Data API 도입 및 React Query 캐싱으로 중복 요청 감소

• 서비스 중단 완전 해결, API 비용 절감으로 안정성과 효율성 동시 달성

📖 관련주 시세 실시간성 개선

• 수동 새로고침으로만 시세 갱신 가능한 구조로 인한 정보 신뢰도 저하 문제 해결

• React Query의 refetchInterval로 10초 주기 자동 갱신 시스템 구현

• 실시간 시세 정보 제공으로 사용자 편의성 및 정보 신뢰도 향상

• 디프만은 디자이너와 개발자가 기획부터 릴리즈, 이후 개선까지 모든 과정을 함께 경험하는 성장 중심의 커뮤니티입니다.

• '디지털 명함 제작 및 공유 서비스'라는 주제로 Took 서비스를 개발했습니다.

• 런칭데이 및 사용성 테스트(UT)를 통해, 실제 사용자들에게 서비스를 소개하고 직접 사용해보는 과정을 진행했습니다.

• 금융 도메인 프로젝트 2회 진행했습니다 (프론트엔드 담당)

• JavaScript , TypeScript , React , Spring boot , AWS의 개념을 학습했습니다.

• Java , Spring boot 미니 프로젝트 1회 진행