백승현
작업

전체 프로젝트

기능을 만든 과정과 그때의 경험을 함께 정리했습니다.

SSUPICK

2026

SSUPICK

라이브

AI 캐릭터 이미지 기반 아바타 소개팅 웹 서비스. 실사진 노출 없이 AI 변환 이미지로 프로필 카드를 등록·조회하는 축제 기간 MVP 서비스.

AI 이미지 변환을 실제 서비스에 붙이고 프롬프트로 톤을 맞춰 축제 2일(오프라인 1일, 온라인 1일)간 운영했습니다. PG 결제 → 계좌이체 전환으로 출시 리스크를 줄여, 부스 당일 143명 가입·프로필 등록 전환율 44%(63명)를 만들었습니다.

ReactTypeScriptClaude Codegemini-nano bananaVercel
PO / 프론트엔드 보조 / 디자인 · 홍보 및 마케팅
Agreed

2026

Agreed

라이브

계약 이후의 프리랜서를 돕는 AI 에이전트. 고객이 이메일·슬랙으로 계속 추가하는 요구를 AI가 분석하고 답변 초안을 쓰되, 확정·발송·금액·일정은 사람이 정합니다. 유니톤 3일 해커톤 결과물.

아이디어를 내고 기획과 프론트를 맡았습니다. AI는 분석과 답변 초안까지만 하고 확정과 발송은 사람이 한다는 원칙을 먼저 정했더니 화면 구조가 거기서 자연스럽게 나왔고, 그 원칙에 안 맞는 기능은 하루 전에 만든 것이어도 지웠습니다.

Next.js 15React 19TypeScriptTailwind CSS 4
아이디어 발의 · 기획 · 프론트엔드 주도 (4인 팀)
HelpDesk AI

2026

HelpDesk AI

라이브

온라인 게임 고객지원 설정의 LLM 상담 서비스. 정책 문서 검색(RAG), 실시간 DB 조회(Tool), 대화 메모리, 안전 필터, 관찰 지표를 한 서비스로 묶고, 승인이 필요한 행동은 사람이 누르게 했습니다.

문서 검색, DB 조회, 대화 기억, 안전 필터를 한 서비스에 넣고 레드팀 10종 중 9종을 막았습니다. 응답 시간 목표(P95 5초)는 못 맞췄는데, 숨기지 않고 어느 경로에서 느린지 나눠 보니 모델이 아니라 도구 호출 구조를 고쳐야 한다는 게 보였습니다.

Java 21Spring BootSpring AIPostgreSQLpgvectorMicrometerAstroReactDocker Compose
백엔드 설계·구현 + 프론트엔드 (단독, SKALA 실습)
UnHook

2026

UnHook

라이브

보이스피싱·스미싱 의심 상황을 대화로 파악하고, 피해 단계(링크 클릭 → 정보 노출 → 앱 설치 → 송금)에 맞는 대응 절차를 안내하는 금융사기 대응 AI Agent. URL 검사·발신번호 대조·대응 절차 RAG·신고 접수(HITL) 4개 Tool과 Middleware로 구성한 6인 팀 실습.

6인 팀에서 대응 절차 RAG와 시연 화면을 맡았습니다. 절차 순서는 임베딩 유사도에 맡기지 않고 코드에서 고정했고, 모델이 URL 검사 도구를 자꾸 건너뛰길래 프롬프트를 손보는 대신 tool_choice로 강제 호출하게 바꿨습니다.

PythonLangChainLangGraphOpenAI gpt-5-nanotext-embedding-3-smallPydanticStreamlitpytest
RAG 파이프라인 · 시연 UI · 설계서 정합성 (6인 팀, SKALA 실습)
monit

2026

monit

라이브

내 소비의 거품을 빼다. 지출을 기록할 때 '금액'뿐 아니라 '소비 당시의 상황'을 함께 남기고, 시간이 지난 후 그 소비의 효용을 다시 입력받아 소비의 맥락과 만족도를 분석 리포트로 보여주는 가계부 서비스.

하이브리드 앱의 상태·캐시·렌더링 문제를 구조로 해결하며, 0→1 세팅부터 배포·QA까지 5개 도메인을 담당했습니다.

Next.jsTypeScriptvanilla-extractTanStack QueryZustandZodkyStorybookreact-swipeabledate-fns
프론트엔드 개발 (2인)
SSUPORT

2026

SSUPORT

라이브

모두의 특별장학금, 가장 든든한 서포터. 특별장학금 신청 과정을 디지털로 전환하여 서류 제출부터 평가까지 편리하게 관리하는 숭실대학교 특별장학금 전용 웹 서비스.

모노레포 세팅부터 시작해 실제 장학금 신청 기간에 열흘간 7번 배포하며 운영까지 했습니다. 초기 번들을 절반으로 줄였고, SSO 로그인과 토큰 갱신을 붙였고, 직접 만든 PDF 뷰어가 한글 파일을 못 읽길래 버리고 브라우저 기본 뷰어로 바꿨습니다.

ReactTypeScriptpnpm workspaceTurborepoEmotionLefthookopenapi-typescriptGitHub ActionsMixpanelGA4
프론트엔드 개발 (3인)
Ecoread

2026

Ecoread

설계

경제 뉴스를 읽다 막힌 사용자가 그 뉴스에 필요한 개념만 1문제로 확인하고, 모를 때만 짧게 배우고, 같은 뉴스를 다시 읽는 3~5분 학습 서비스. 기획 → 화면 → 데이터 모델 → API 명세까지 3일 단독 설계 과제.

경제 뉴스 학습 서비스를 기획부터 API 명세, ERD까지 3일 동안 혼자 설계했습니다. AI가 만든 초안은 관리자가 검수하기 전엔 공개될 수 없게 테이블 구조로 막았고, 와이어프레임 대신 목 프로토타입을 만들어 화면과 API와 ERD가 서로 맞는지 직접 확인했습니다.

OpenAPI 3.0.3DBMLNext.js 16React 19TypeScriptTailwind CSS 4
기획 · UI 프로토타입 · 데이터 모델 · API 명세 (단독, SKALA 설계 과제)
ssungBTI

2025

ssungBTI

라이브

숭실대학교 마스코트 '슝슝이' + MBTI 테스트를 결합한 참여형 홍보 콘텐츠. 이벤트 기간 GA 기준 MAU 3,200명을 달성했습니다.

3일로 압축된 일정에서 '무엇을 먼저 낼지'를 MoSCoW로 합의해 데드라인 내 배포하고, 혼자 기획·개발·운영·측정까지 맡아 GA 기준 MAU 3,200명을 달성했습니다.

Next.jsTypeScriptRecoilGoogle AnalyticsVercel
기획 리드 + 프론트엔드 단독 개발
badcn/ui

2026

badcn/ui

라이브

shadcn/ui를 패러디한 적대적 UI 컴포넌트 라이브러리. 만우절 해커톤에서 기획하고, 당일 내 npm 패키지 배포까지 완료했습니다.

해커톤 당일 내 npm 배포(badcn-ui@0.1.3, 4버전 릴리즈) 완료. 16개 hostile-ui 컴포넌트 라이브러리.

ReactTypeScriptViteTailwind CSSnpm publish
초기 세팅 + 컴포넌트 개발 + npm 배포
안심쉼터

2024

안심쉼터

아카이브

기후 위기 대피소 탐색 서비스. 바텀시트 렌더링 성능을 Chrome Performance Trace로 정량 진단하고, RunTask −42.75%·Layout −70.28%를 달성했습니다.

바텀시트의 렌더링 jank를 감이 아닌 Chrome Performance Trace 수치로 진단해, RunTask −42.75%·Layout −70.28%를 달성했습니다.

ReactTypeScriptIntersectionObserverCSS transform
프론트엔드 개발
그린스파크

2024

그린스파크

아카이브

에너지 효율 조회·전기세 예측 웹앱. 디자인 확정 후 다중 팝업을 단일 바텀시트로 통합하는 UX 개선안을 Figma 시안과 코드로 제안해 팀 공통 컴포넌트로 채택되었습니다.

다중 팝업 → 단일 바텀시트 통합을 레퍼런스 분석 + Figma 시안 + 코드로 제안, 팀 전체가 공통 UX 컴포넌트로 채택. ESD 공모전 동상 수상.

Next.jsTypeScript
프론트엔드 개발