황총무의 실험실

Frontend Developer
좋은 크루들과 함께할 때,
더 좋은 서비스를 만듭니다.
직접 사용할 수 있는 서비스를 만들 때 가장 큰 성취감을 느낍니다.
IE6 시절부터 쌓아온 크로스브라우징 경험은 어떤 환경에서도 견고한 UI를 구현하는 단단한 기반이 되었습니다. 이를 바탕으로 React, Next.js 등 프론트엔드 기술을 유연하게 다루며 사용성을 극대화합니다. 견고한 마크업 역량 위에 프론트엔드 기술을 더해, 사용자가 느낄 경험의 밀도를 높이는 데 집중합니다.

단순 구현을 넘어 기획의 의도와 UX 가치까지 깊이 있게 이해하며 개발합니다.
디자인 디테일은 물론 프로젝트의 전체적인 흐름을 파악하고 있어, 기획자·디자이너와 긴밀히 소통하며 팀의 시너지를 이끌어내는 든든한 파트너입니다.

🛠 Skills

Languages & Frameworks

TypeScriptNext.jsReactSvelteAngular

Styling & UI

SCSS (CSS Modules)Styled ComponentsTailwind CSSAnt DesignAdorable CSSResponsive WebCross Browsing

Infra & Tools

Monorepo (Turbo)GitSlackJiraWikiAgileFigmaZeplin

🎓 Education

강원대학교 (춘천)

미술학과 서양화 전공

2006 - 2010

💼 Experience

카카오 엔터프라이즈상세보기

워크개발 / 마크업개발파트

2020.07 - 2023.08 (3년 2개월)

  • React, Svelte, Angular 등 다양한 프론트엔드 프레임워크 기반의 대규모 서비스 구축 및 운영
  • 카카오워크 내 주요 기능(투표/할일)을 4종 OS(Win/Mac/iOS/Android) 대응 웹뷰로 구현
  • CSS Variables 및 Atomic CSS(AdorableCSS)를 도입하여 다크모드 시스템 및 스타일 아키텍처 구축

29CM(무신사)상세보기

Platform / Cell FE

2017.02 - 2020.07 (3년 6개월)

  • AngularJS 기반 29CM 웹 서비스 전면 리뉴얼 및 PC/Mobile 통합 운영 리딩
  • 삼성화재, 렉서스 등 대규모 트래픽 미디어 캠페인의 인터랙션 개발 주도 (앤어워드 2회 수상)
  • 기획 공백을 메우는 주도적인 UI/UX 제안과 공통 모듈화로 개발 생산성 및 협업 효율 증대

더존 비즈온상세보기

UI 개발팀 (전임)

2016.05 - 2016.12 (7개월)

  • 기업용 비즈니스 플랫폼 WEHAGO의 초기 React UI 아키텍처 및 마크업 표준 설계
  • 1인 리드 개발자로서 외부 협력사/프리랜서 인력의 개발 가이드라인 수립 및 품질 관리
  • 비즈니스 핵심 모듈의 UI 안정성 확보를 위한 코드 리팩토링 및 최적화 (Quality Assurance)

🚀 Toy Projects

Core Tech Stack :
GeminiOpenAI CodexNext.js 14TypeScriptSupabaseVercel

"Real Problems, Practical Solutions."

이 프로젝트들은 제가 직접 사용하기 위해 필요성을 정의하고 설계한 서비스들입니다.
사용자 동선과 상황을 먼저 시뮬레이션해 기능을 정리하고, 불필요한 요소를 덜어내 핵심 문제 해결에 집중했습니다.

구현 과정에서는 AI를 활용해 반복 작업을 줄였고, 저는 전체 구조 설계, 코드 리팩토링, 버전 관리와 유지보수에 집중했습니다.

[ 사용 → 문제 인식 → 개선 → 구조 정리 ]
이 반복을 통해 단순 구현을 넘어 기획부터 코드 관리까지 이어지는 개발 경험을 쌓아왔습니다.

중복되는 업무 일정과 "리소스 현황"을 한눈에 관리하기 위해 직접 기획·개발한 내부용 캘린더입니다.
배포 일정과 이슈를 타임라인으로 시각화하고 "원클릭 보고용 텍스트"로 변환해 실무 효율을 높였습니다.
현재 실무에서 직접 사용 중인 관계자 전용 서비스입니다.

⚠️ 기획 배경
여러 프로젝트가 병렬로 진행되는 환경에서 반복되는 비효율이 있었습니다.
  • 다수 프로젝트의 일정 충돌 및 리소스 가시성 부족
  • 캘린더 내용을 일일이 텍스트로 옮겨 적어야 하는 수기 보고 체계
  • 일정별 이슈가 분산되어 트래킹이 어려움
💡 해결 전략
시각화와 자동화로 관리 및 커뮤니케이션 비용을 줄였습니다.
  • 프로젝트별 타임라인으로 병목/충돌 구간 사전 발견
  • 캘린더 데이터를 '보고용 요약 텍스트'로 즉시 변환하여 보고 시간 단축
  • 일정별 메모/이슈 기록으로 흐름 추적
🛠 기술 구현
  • date-fns를 활용해 주/월 단위 캘린더 로직 직접 설계 및 구현
  • Drag & Drop 인터랙션으로 일정 수정 및 재배치 사용성 개선
  • Clipboard API로 보고용 텍스트 자동 포맷팅
🚀 Update History
  • 1.0.12026.02.02완료 업무 가시성 개선: 체크 시 타임라인에서 즉시 숨김(눈감기) 처리 및 별도 완료 리스트를 통한 아카이브 조회(눈뜨기) 기능 구현

단톡방의 비효율적인 일정 조율을 "소거법(Negative Selection)"으로 해결한 스케줄링 서비스입니다.
'모두 가능한 날'을 찾기보다 "안 되는 날을 먼저 지우는" UX로 확정 시간을 단축했습니다.

⚠️ 기획 배경
N명의 일정이 파편화된 단체 채팅방에서는 다음 문제가 반복됩니다.
  • 교집합을 찾기 위한 불필요한 메시지 왕복
  • 일정 확인 과정의 인지적 피로
  • 결정 지연으로 인한 스트레스
💡 해결 전략
관성적으로 가능한 날을 모으는 방식 대신, '안 되는 날'을 우선적으로 제거하는 로직을 설계했습니다.
  • 최소한의 입력(터치)만으로 참여 가능한 직관적 UX
  • 선택지 축소에 따라 의사결정 속도가 빨라지는 흐름 유도
  • 결과적으로 일정 확정 시간(Time-to-Decision)을 단축
🛠 기술 구현
  • date-fns 기반 연산 최적화로 일정 처리 반응성 확보
  • Next-SEO 적용으로 링크 공유 시 미리보기(제목·설명)까지 고려한 UX 설계
  • 일정 공유가 잦은 서비스 특성에 맞춰 URL 중심의 접근성 강화

작심삼일을 "잔디 심기"의 재미로 극복하는 습관 트래커입니다.
목표를 달성할수록 나만의 컬러로 진하게 물드는 달력을 보며, 하루의 노력을 직관적으로 확인하고 성취감을 느낄 수 있습니다.

⚠️ 기획 배경
텍스트 기반 체크리스트만으로는 지속적인 동기 부여가 어렵습니다.
  • 체크 여부만으로는 부족한 시각적 피드백
  • 월간 흐름과 성실도를 한눈에 보기 어려운 UI 구조
💡 해결 전략
개발자들에게 익숙한 GitHub 기여도 그래프(Heatmap)에서 아이디어를 얻어 해결책을 설계했습니다.
  • 활동 빈도를 색상 농도로 표현하여 성취감을 직관적 시각화
  • '잔디 심기'라는 게이미피케이션 요소를 도입해 지속적인 참여 유도
🛠 기술 구현
  • Context API로 전역 모달 시스템을 구축하여 UI 일관성 유지
  • 달력 로직과 상태 관리를 Custom Hook으로 추상화하여 코드 재사용성 증대

체중 감량의 핵심인 "밤사이 소화율"에 집중한 다이어트 트래커입니다.
아침과 저녁의 체중 차이를 시각적인 차트로 분석해 제공하며, 단순한 기록을 넘어 내 몸의 대사 효율을 직관적으로 파악할 수 있습니다.

⚠️ 기획 배경
체중 숫자만 기록하는 방식은 인과관계 파악이 어렵고 동기 부여가 약했습니다.
  • 식단/수면이 체중 변화에 미치는 영향 파악의 어려움
  • 숫자 변화에 일희일비하게 되는 심리적 피로감
💡 해결 전략
'밤사이 감량폭(소화율)'이라는 핵심 지표를 발굴하여 새로운 피드백 루프를 설계했습니다.
  • 저녁 식사 후 다음 날 아침까지의 변화를 시각화하여 공복의 중요성 인지
  • 단순 기록이 아닌, 내 몸의 데이터를 분석하는 대시보드 형태 제공
🛠 기술 구현
  • Recharts 라이브러리를 커스터마이징하여 체중 변화 추이를 직관적 그래프로 표현
  • 시각화 반응성을 최적화해 모바일 환경에서도 쾌적한 UX 제공

여행 후 복잡하게 얽힌 영수증 정산을 최소 이체 경로 알고리즘으로 가장 스마트하게 해결해주는 여행 총무 비서 서비스입니다.
누가 누구에게 얼마를 보내야 하는지 직관적인 카드 UI로 시각화했으며, 별도 가입 없이 URL 링크 하나로 정산 결과를 멤버들과 손쉽게 공유할 수 있습니다.

⚠️ 기획 배경
여행 후 정산 과정에서 발생하는 복잡한 N:N 송금 구조를 단순화할 필요가 있었습니다.
  • 누가 누구에게 보내야 할지 헷갈리는 복잡한 이체 경로
  • 엑셀이나 수기 계산 시 발생하는 잦은 오류와 불편함
💡 해결 전략
최소 이체 경로 알고리즘을 적용하여 송금 횟수를 최소화하고 경험을 개선했습니다.
  • 복잡한 거래 내역을 분석해 최적의 송금 경로 도출
  • 계산 결과를 직관적인 카드 UI 리포트로 시각화하여 공유 편의성 증대
🛠 기술 구현
  • 핵심 기능인 '정산 계산'과 '데이터 저장'을 Custom Hook으로 모듈화
  • 로직과 UI를 철저히 분리(SoC)하여 유지보수성과 테스트 용이성 확보
🚀 Update History
  • 1.0.12026.02.06정산 가시성 및 공유 편의성 개선: 합계 세부 내역 아코디언 UI 제공으로 정산 정확도 확인 기능 구현 및 카카오톡 공유하기 기능 추가

회식이나 모임 자리에서 계산자나 벌칙자를 정할 때 유용한 실시간 멀티플레이 웹 게임 서비스입니다.
복잡한 앱 설치 없이 URL 링크 공유만으로 누구나 쉽게 참여할 수 있으며,
사다리 타기, 돌림판, 광클 대전 등 다양한 게임의 진행 상황이 참여자 전원에게 실시간 동기화됩니다.

⚠️ 기획 배경
오프라인 모임에서 빠르고 공정하게 내기(벌칙/정산)를 진행할 도구가 부족했습니다.
  • 특정 앱을 모두가 설치해야 하는 번거로움 (낮은 접근성)
  • 한 명의 폰으로 돌려가며 진행할 때의 루즈함과 조작 의심
💡 해결 전략
별도 설치 없는 웹 기반 환경과 실시간 동기화 기술로 문제를 해결했습니다.
  • URL 링크 공유만으로 즉시 참여 가능한 높은 접근성
  • 모든 참여자의 화면이 0.1초 단위로 동기화되는 리얼타임 인터랙션 구현
🛠 기술 구현
  • Supabase Realtime을 활용해 별도 소켓 서버 없이 실시간 동기화 구현
  • Canvas API를 활용해 사다리/돌림판 애니메이션을 직접 드로잉 및 최적화
  • DB 구독(Subscription) 모델을 통해 서버 부하를 줄이면서 반응성 확보