황총무의 실험실

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

단순 구현을 넘어 기획의 의도와 UX 가치까지 깊이 있게 이해하며 개발합니다.
디자인 디테일은 물론 프로젝트의 전체적인 흐름을 파악하고 있어, 기획자·디자이너와 긴밀히 소통하며 팀의 시너지를 이끌어내는 든든한 파트너입니다.
한화생명다이렉트 웹 개발 / 디지털프로덕트팀 - 세일즈파트 (대리)
보장분석 서비스 운영 전담HSP 상담 플랫폼 운영 및 비즈니스 고도화HSP 상담 플랫폼 마이그레이션외 1개
2023.08 - 재직 중3년 2개월

경력

한화생명주요 프로젝트 4개
다이렉트 웹 개발 / 디지털프로덕트팀 - 세일즈파트 (대리)2023.08 - 재직 중
  • 다이렉트 웹 서비스 및 백오피스 프론트엔드 전담 개발
  • HSP 상담 플랫폼 레거시 마이그레이션 (Legacy → Next.js)
  • D2F, 전자명함 등 온/오프라인 연계(O2O) 비즈니스 서비스 확장
  • 보장분석 서비스 고도화 및 보장분석 전용 HSP 상담 플로우 구축
보장분석 서비스 운영 전담2026.01 ~ 상시 운영

보장분석 서비스의 프론트엔드 개발을 전담하며, 운영 이슈 대응부터 기능 고도화까지 안정적인 서비스 품질을 유지

Next.jsReactTypeScriptStyled ComponentsSCSSFigma
HSP 상담 플랫폼 운영 및 비즈니스 고도화2025.04 ~ 상시 운영

플랫폼 오픈 이후, 온/오프라인 연계(O2O) 및 고객 행동 기반의 타겟팅 기능을 지속적으로 확장하여 비즈니스 가치(CVR)를 창출하고 시스템 안정성을 확보

Next.jsReactTypeScriptReact-QueryStyled ComponentsSCSSFigma
HSP 상담 플랫폼 마이그레이션2025.01 - 2025.04

노후화된 JSP 기반의 레거시 시스템을 Next.js(CSR) 환경으로 전면 재구축하여 사용자 경험(SPA)을 개선하고, 컴포넌트 기반 아키텍처 도입으로 유지보수 효율성 확보

Next.jsReactTypeScriptReact-QueryStyled ComponentsSCSSFigma
다이렉트 웹 & 백오피스 운영2023.08 - 2024.12

보험 상품 가입을 위한 대고객 다이렉트 웹 서비스 및 내부 운영 효율화를 위한 백오피스 시스템 개발

Next.jsReactTypeScriptStyled ComponentsSCSSFigma
한화생명 히스토리 보기
카카오 엔터프라이즈주요 프로젝트 6개
워크개발 / 마크업개발파트2020.07 - 2023.08 (3년 2개월)
  • React, Svelte, Angular 등 다양한 프론트엔드 프레임워크 기반의 대규모 서비스 구축 및 운영
  • 카카오워크 내 주요 기능(투표/할일)을 4종 OS(Win/Mac/iOS/Android) 대응 웹뷰로 구현
  • CSS Variables 및 Atomic CSS(AdorableCSS)를 도입하여 다크모드 시스템 및 스타일 아키텍처 구축
카카오워크 투표 (Vote)2023.03 - 2023.06

4종 OS(Win, Mac, iOS, Android) 네이티브 앱 내 탑재되는 웹뷰 기반 투표 서비스 구축

ReactTypeScriptSCSSAdorableCSS
카카오워크 할 일 (Todo)2022.08 - 2023.04

기존 네이티브 앱 기능을 웹(Svelte)으로 전환(Migration)하여 유지보수 효율성 및 사용성 개선

SvelteTypeScriptSCSSAdorableCSS
카카오워크 음성채팅 웹뷰 구현2022.06 - 2022.09

PC 클라이언트(Win, Mac) 내 음성채팅 기능을 위한 고도화된 UI 개발

SvelteSCSSAdorableCSS
근태 2.0 (Attendance System)2021.07 - 2022.06

PC 브라우저 기반의 차세대 카카오워크 근태 관리 서비스 프로토타이핑 및 개발

SvelteTypeScriptVite
카카오 i 엔터프라이즈 빌더 2.02021.02 - 2023.03

PC 기반 챗봇 빌더 서비스의 프레임워크 마이그레이션 및 리팩토링

ReactTypeScriptViteSCSS
전사 서비스 운영 및 품질 고도화2020.07 - 2021.01

카카오 엔터프라이즈 주요 서비스의 UI 유지보수 및 성능/웹 접근성 개선

HTML/CSSAngularResponsive
카카오 엔터프라이즈 히스토리 보기
29CM(무신사)주요 프로젝트 5개
Platform / Cell FE2017.02 - 2020.07 (3년 6개월)
  • AngularJS 기반 29CM 웹 서비스 전면 리뉴얼 및 PC/Mobile 통합 운영 리딩
  • 삼성화재, 렉서스 등 대규모 트래픽 미디어 캠페인의 인터랙션 개발 주도 (앤어워드 2회 수상)
  • 기획 공백을 메우는 주도적인 UI/UX 제안과 공통 모듈화로 개발 생산성 및 협업 효율 증대
29CM 사이트 전면 개편 및 통합 운영2017.05 ~ 2018.02 (이후 상시 운영)

AngularJS 기반의 PC/Mobile 원페이지 반응형 웹(SPA) 구축 및 통합 유지보수 총괄

AngularJSSCSSZeplinGitWiki
공통 UI 컴포넌트 패키지 'ruler' 개발2017.05 ~ 상시 운영

UI 일관성 유지 및 개발 생산성 향상을 위한 사내 공통 컴포넌트 라이브러리 구축

AngularJSSCSSZeplinGitWiki
인터랙티브 브랜드 캠페인 & 미디어 PT2017.07 ~ (프로젝트성)

삼성화재, 렉서스 등 주요 브랜드 제휴 캠페인을 위한 고성능 인터랙션 페이지 개발

HTML5CSS3 (Keyframe/Transition)JavaScript (ES5/ES6)jQueryZeplin
29TV (숏폼 비디오 커머스 플랫폼)2019.09 ~ 2020.01

29초 영상 큐레이션을 통한 신규 V-Commerce 서비스 구축

AngularJSVideo.jsSCSS
월간 컬쳐 캘린더 (Culture Calendar)2019.01 ~ 2019.03

월간 문화 콘텐츠 큐레이션 서비스 개발 및 운영

AngularJSSCSSJavaScriptZeplinGitWiki
29CM(무신사) 히스토리 보기
더존 비즈온주요 프로젝트 1개
UI 개발팀 (전임)2016.05 - 2016.12 (7개월)
  • 기업용 비즈니스 플랫폼 WEHAGO의 초기 React UI 아키텍처 및 마크업 표준 설계
  • 1인 리드 개발자로서 외부 협력사/프리랜서 인력의 개발 가이드라인 수립 및 품질 관리
  • 비즈니스 핵심 모듈의 UI 안정성 확보를 위한 코드 리팩토링 및 최적화 (Quality Assurance)
WEHAGO 플랫폼 초기 구축 및 표준화2016.05 - 2016.12

초대형 B2B 플랫폼(WEHAGO)의 초기 UI 기반을 다지고 핵심 기능을 구현

React.jsHTML5/CSS3SCSSGit
더존 비즈온 히스토리 보기
하이브랩주요 프로젝트 3개
UIT 웹표준개발팀 (전임)2012.09 - 2016.05 (3년 9개월)
  • 국내 대형 포털(Naver) 및 커머스(CJ) 사이트의 웹 표준 마크업 및 운영
  • IE6부터 최신 브라우저까지 완벽한 크로스 브라우징(Cross-Browsing) 구현 역량 보유
  • 웹 접근성(Web Accessibility) 준수 및 대규모 서비스 운영 프로세스 체득
CJ오쇼핑 파견 및 운영2014.05 - 2016.05

CJmall PC/Mobile, 올리브영, 오클락 등 CJ 계열 커머스 플랫폼 운영 및 구축

HTML5CSS3jQueryWeb Accessibility
네이버(NAVER) 서비스 운영2012.09 - 2014.05

네이버 주요 서비스(쇼핑, 부동산, 광고 등)의 UI 마크업 및 운영

HTML4/5CSS2/3Cross BrowsingPhotoshop
한게임 & 브랜드 사이트 구축2012.09 - 2014.05

한게임 포털 운영 및 IF몰, Raffinest 등 브랜드 사이트 리뉴얼

HTMLCSSjQueryUI Interaction
하이브랩 히스토리 보기

대표 프로젝트

한화생명 HSP 상담 서비스 개편
한화생명

HSP 상담 플랫폼 마이그레이션

2025.01 - 2025.04

노후화된 JSP 기반의 레거시 시스템을 Next.js(CSR) 환경으로 전면 재구축하여 사용자 경험(SPA)을 개선하고, 컴포넌트 기반 아키텍처 도입으로 유지보수 효율성 확보

  • JSP 기반의 강결합 구조를 해소하고, Next.js 및 컴포넌트 단위의 모듈화 설계를 통해 재사용성 증대
  • React-Query의 캐싱 및 조건부 페칭(지역 선택 시 FP 호출) 전략을 도입하여 초기 렌더링 속도 획기적 개선
  • TypeScript 도입 및 비즈니스 로직(Custom Hooks)과 UI의 철저한 분리로 런타임 에러 사전 방지
  • 외부 유입(광고 배너 등) 시 발생하던 UTM 파라미터 유실 문제를 근본적으로 해결하여 마케팅 데이터 정합성 확보
  • 구전으로 전해지던 레거시 히스토리와 복잡한 로직을 Figma로 시각화/문서화하여 인적 의존도 제거 및 운영 리스크 최소화
전체 과업 보기
카카오워크 할일 PC
카카오 엔터프라이즈

카카오워크 할 일 (Todo)

2022.08 - 2023.04

기존 네이티브 앱 기능을 웹(Svelte)으로 전환(Migration)하여 유지보수 효율성 및 사용성 개선

  • 고성능 프레임워크 Svelte를 도입하여 네이티브 앱 수준의 빠른 렌더링 속도와 반응성 확보
  • User Agent 감지를 통한 OS별 분기 처리로 모바일/데스크탑 환경에 최적화된 UX 제공
  • Window Resize 이벤트에 대응하는 반응형 레이아웃 정책 수립 및 구현
  • 복잡한 할 일 관리 상태(완료, 미완료, 수정 등)에 따른 정교한 UI 인터랙션 구현
전체 과업 보기
29CM 사이트 전면 개편 및 통합 운영
29CM(무신사)

29CM 사이트 전면 개편 및 통합 운영

2017.05 ~ 2018.02 (이후 상시 운영)

AngularJS 기반의 PC/Mobile 원페이지 반응형 웹(SPA) 구축 및 통합 유지보수 총괄

  • 메인, 상품상세, 장바구니, 주문서 등 커머스 핵심 영역 및 매거진/이벤트 페이지 전면 개편
  • OSMU(One-Source Multi-Use) 반응형 전략 수립으로 PC/Mobile 중복 개발 리소스 50% 이상 절감
  • SPA(Single Page Application) 구조 도입으로 페이지 전환 속도 및 사용자 경험 개선
  • 개편 이후 29CM 전체 레거시 소스 및 신규 기능 개발에 대한 전담 관리 수행
  • 기획/디자인 의도를 기술적으로 최적화하여 구현하는 'Tech-Design' 가이드라인 주도
전체 과업 보기

일하는 방식과 기술

견고한 마크업

IE6부터 최신 브라우저까지, 테이블 레이아웃에서 Flexbox·Grid까지 직접 경험하며 쌓은 크로스브라우징 노하우. 어떤 디바이스, 어떤 해상도에서도 흔들리지 않는 UI를 만듭니다. 버튼·입력·페이지 골격처럼 반복되는 마크업은 공통 컴포넌트로 묶어 두어, 한 번 고치면 모든 화면에 같은 모습으로 반영되고 새 화면은 조립만으로 나옵니다. 29CM의 공통 UI 패키지 'ruler'와 이 사이트의 UI Kit·ServiceLayout이 그 방식입니다.

프론트엔드 전문성

React, Next.js, TypeScript를 주력으로 설계부터 배포·운영까지 실서비스 전 과정을 경험해왔습니다. Svelte, Angular 등 다양한 프레임워크를 넘나든 경험 덕분에 트렌드에 휘둘리지 않고, 프로젝트에 맞는 최적의 구조를 판단할 수 있습니다.

디자인을 넘어, 디테일이 만드는 경험

서양화를 전공하며 훈련한 시각적 감각으로 디자이너의 의도를 정확하게 구현합니다. 여백, 정렬, 타이포그래피는 물론 인터랙션과 사용자 흐름까지 — 보이는 것 너머의 경험을 설계하며, 픽셀 단위의 디테일에서 완성도가 결정된다고 믿습니다.

팀 시너지

'왜 이걸 해야 하는지'에서 출발해 '우리가 무엇을 할 수 있는지'까지 함께 고민합니다. 주어진 일을 넘어 방향을 제안하고, PM의 시야로 전체 흐름을 챙기며 — 같이 일할수록 속도와 방향이 맞아가는 시너지를 만들어내는 동료입니다.

프론트엔드

TypeScriptNext.jsReactSvelteAngular

스타일·UI

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

협업·도구

Monorepo (Turbo)GitSlackJiraWikiAgileFigmaZeplin

🚀 Toy Projects · 16개

"Real Problems, Practical Solutions."

Shared UIUI Kit 모음집 보러가기

황총무에서 분리한 공용 컴포넌트와 스타일 토큰 문서를 한 화면에서 확인할 수 있습니다.

/ui-kit

내 서비스 요약

2026.08 - 진행 중 (1인 개발)

흩어져 있던 서비스를 하나의 계정으로 연동하면, 오늘·이번 주 현황을 한 화면에서 모아 보는 통합 대시보드입니다.
가계부·운동·습관·체중 요약 위젯과 진행 중인 약속방·정산방을 한곳에 모으고, 위젯에서 바로 빠른 등록까지 할 수 있게 했습니다.

바로가기

업무 캘린더

2026.01 - 진행 중 (1인 개발)

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

바로가기

약속 잡기

2025.12.01 - 진행 중 (1인 개발)

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

바로가기

장소잡기

2025.12.15 - 진행 중 (1인 개발)

약속 날짜가 정해진 뒤 네이버 지역 검색 API를 활용해 후보 장소를 등록하고, 참여자들이 복수 투표로 선호 장소를 결정하는 서비스입니다.
약속잡기에서 확정된 멤버가 자동으로 연동되어 별도 이름 입력 없이 바로 투표에 참여할 수 있습니다.

바로가기

여행 경비 계산기

2025.12.24 - 진행 중 (1인 개발)

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

바로가기

여행 플랜 (날짜별 동선·이동 시간)

2026.09 - 진행 중 (1인 개발)

출발·도착 날짜를 정하면 DAY 탭이 하루씩 만들어지고, 하루마다 들를 곳을 담아 순서를 바꾸는 여행 일정표입니다.
순서를 바꾸면 지도에 번호 핀과 선이 다시 그려지고, 장소와 장소 사이마다 도보·대중교통·차량 이동 시간이 붙습니다.
로그인 없이 주소(링크) 하나로 같이 고칠 수 있고, 일정을 글로 복사해 메신저에 그대로 붙여 넣을 수 있습니다.

바로가기

가계부

2026.03 - 진행 중 (1인 개발)

개인 기록과 공용 정산을 한 흐름으로 연결한 생활형 가계부 서비스입니다.
혼자 쓰는 개인 가계부에서 먼저 내역을 정리하고, 필요한 항목만 공용방에 공유할 수 있도록 설계해 실제 생활비 관리 방식에 더 가깝게 만들었습니다.
직접 입력뿐 아니라 문장 등록, 이미지 등록, 리스트/캘린더/보드 뷰까지 제공해 기록과 확인 과정을 모두 줄였습니다.

바로가기

습관 관리

2025.12.22 - 진행 중 (1인 개발)

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

바로가기

일일 기록

2026.02 - 진행 중 (1인 개발)

하루 일기와 체크리스트를 함께 관리할 수 있는 개인 루틴 기록 서비스입니다.
월별로 체크 항목을 다르게 운영하고, 달성률을 날짜 흐름 그래프로 확인해 루틴 변화를 직관적으로 파악할 수 있습니다.

바로가기

체중 관리

2026.01 - 진행 중 (1인 개발)

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

바로가기

운동 기록 (황총무운동방)

2026.04 - 진행 중 (1인 개발)

러닝·웨이트·기타 활동을 한곳에서 기록하는 운동 일지 서비스입니다.
종목마다 다른 기록 방식을 각각에 맞게 설계하고, 월별 달력과 운동 잔디(히트맵)로 누적 흐름을 한눈에 볼 수 있게 했습니다.

바로가기

인바디 기록

2026.04 - 진행 중 (1인 개발)

인바디 측정 결과를 기록하고 원하는 지표만 골라 추이를 확인하는 체성분 관리 서비스입니다.
체중·골격근량·체지방량부터 BMI·체지방률·내장지방까지 8개 지표를 함께 다루며, 지표별 스파크라인 차트로 변화를 직관적으로 보여줍니다.

바로가기

게임방

2025.12 - 진행 중 (1인 개발)

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

바로가기

테니스 대회 (대진표 자동 생성)

2026.09 - 진행 중 (1인 개발)

참가 명단만 넣으면 대진표와 시간표를 자동으로 짜 주는 대회 운영 서비스입니다.
개인 승점으로 겨루는 교류전, 8팀 더블 엘리미네이션 팀 토너먼트, 2인 복식 팀이 붙는 일반 대회(풀리그 · 조별 리그+결선 · 토너먼트) 중 대회 성격에 맞는 양식을 고를 수 있습니다.
링크를 받은 사람이 점수를 넣으면 순위표가 바로 갱신됩니다.

바로가기

야근 계산기 (보상휴가 계산)

2026.03 - 진행 중 (1인 개발)

야근한 시간을 넣으면 회사 기준에 맞춰 보상휴가가 얼마나 쌓이는지 계산해 주는 도구입니다.
적립 기준이 다른 두 가지 규칙 중에 골라 쓸 수 있고, 날짜별 기록은 달력에 남아 이번 달 누적을 한눈에 볼 수 있습니다.
로그인하면 기록이 계정에 자동으로 연결되어 기기를 바꿔도 이어집니다.

바로가기

경조사비 장부 (축의금·부의금)

2026.09 - 진행 중 (1인 개발)

축의금·부의금을 사람별로 기록하고 얼마를 해야 할지 바로 찾아보는 장부입니다.
받은 기록에 답례를 표시하면 나중에 낸 기록과 이어 붙어, 누구에게 아직 답례가 남았는지 표로 대조할 수 있습니다.
상대방 이름과 메모는 서버에서 암호화해 저장하고 로그인한 본인만 볼 수 있습니다.

바로가기