프론트엔드 개발자 황소미입니다

somi.c.hwang@gmail.com | GitHub | LinkedIn

문제를 정확히 정의하고 해결합니다.

• 복잡하고 모호한 사용성 영역에서 ‘문제 정의’를 최우선으로 하여, 근본 원인 파악 후 해결책 설계
• 사용자가 인지하지 못하는 불편을 주도적으로 탐지해 기술적으로 해결, UX 안정성·일관성 향상
• 문제 스코프를 좁혀 해결 시간 단축, 프로젝트 지연 리스크 최소화

팀의 속도를 끌어올립니다.

• 디자인 시스템 구축으로 평균 페이지 개발 시간 30% 단축
• QA 프로세스 개편으로 테스트 오류 건수 20% 감소
• 협업 워크플로우 개선으로 디자이너·개발자 커뮤니케이션 비용 절감, 피드백 속도 향상

동료들은 저를 이렇게 평가합니다:

• “기술적으로 타협하지 않고, 제품과 코드의 품질에 끝까지 책임을 져요.”
• “보틀넥을 줄이기 위해 다양한 시도를 하고, done is better than perfect를 실천해요.”
• “더 나은 협업을 위해 팀의 워크프로세스에도 적극적으로 기여해요.”
• “팀이 더 성장할 수 있도록 적극적으로 네트워킹한 뒤 의미있는 기회를 만들어줘요.”

Overview

총 경력 3년 8개월

• 2021.11-현재 비브리지 슬리드팀 Frontend Engineer (3년 8개월 | 정규직)
• 2021.08-2021.08 고피자 Frontend Engineer 인턴 (1개월 | 인턴)

Work Experience

비브리지(BeBridge)

• Canvas 기반 고성능 2D 이미지 편집 프레임워크 설계 및 아키텍처 최적화

  노트 내 이미지에 실시간 마크업 기능을 제공하는 2D 그래픽 편집 시스템을 구축했습니다. 단일 Canvas에서 수십 개의 상태가 연쇄적으로 영향을 주는 복잡성을 해결하기 위해, 핵심 렌더링 로직과 사용자 상호작용 로직을 명확히 분리하여 안정적인 아키텍처를 구축했습니다.

  • 관심사 분리 기반 아키텍처 설계
    • 하위 계층에서 Fabric.js Canvas 엔진, 브러시 인스턴스 관리 등 핵심 렌더링 로직 담당
    • 상위 계층에서 도구 전환, 색상 변경, Undo/Redo 등 사용자 상호작용 로직 처리
    • 계층 간 명확한 책임 분리로 새로운 편집 도구 추가 시에도 기존 로직에 영향 없이 확장 가능
  • 연쇄 상태 변경 안전성 보장
    • 도구 선택 → 브러시 인스턴스 생성 → 투명도 설정 → 색상 팔레트 전환 → UI 업데이트의 복잡한 의존성 체인 관리
    • 도구 인스턴스 동적 전환으로 자유곡선·직선 그리기 모드를 seamless하게 전환
  • 확장성 확보
    • 새로운 편집 도구 추가 시 기존 로직에 영향 없이 기능 확장 가능
  • 이미지 크롭 영역 병합 알고리즘
    • Canvas 2D API를 활용해 마크업 레이어를 원본 이미지에 정확한 좌표로 병합하는 이미지 처리 시스템 구현
  • 결과적으로 복잡한 편집 기능 추가에도 기존 시스템 안정성 유지, 코드 유지보수성 대폭 개선

  핵심 스택: Fabric.js, React, TypeScript, Canvas 2D API

• 복잡한 상호작용을 고려한 디자인 시스템 구축으로 팀 생산성 및 협업 효율 향상

  멀티 플랫폼 환경에서 일관된 UI/UX를 제공하기 위해 디자인 시스템을 구축하며 고성능·확장성 중심의 컴포넌트 아키텍처를 설계했습니다. 디바이스별 상호작용 차이를 해결하고, 복잡한 UI를 추상화해 재사용성을 높였으며, 접근성·반응형까지 통합적으로 고려해 개발팀의 생산성과 협업 효율을 크게 향상시켰습니다.

  • 인터랙션 최적화
    • 터치환경, 데스크탑 환경 등을 고려해 멀티 플랫폼에 대응하는 디자인 시스템 설계
    • Framer Motion 기반 Stagger Animation, 모달 전환 효과로 자연스러운 UI 피드백 구현
  • 구조·타입 설계
    • Union Type+Tuple 기반 Button 사이즈 시스템으로 기본 패턴+커스텀 모두 지원
    • 복잡한 UI 상태를 추상화해 재사용성·성능 확보
  • 접근성·반응형
    • 시멘틱 HTML, ARIA 속성, focusOnRender로 키보드 접근성 강화
    • 디바이스별 분기 처리 + 반응형 Typography로 일관된 레이아웃 패턴 제공
  • 결과적으로 평균 페이지 개발 시간 30% 단축, QA 오류 감소, 팀·디자이너 만족도 동시 개선

  핵심 스택: React, TypeScript, Styled-Components, Framer Motion

• Vite, Storybook 기반 디자인 시스템 라이브러리 마이그레이션으로 개발 속도 및 확장성 향상

  초기에는 Webpack 기반으로 구성된 디자인 시스템 라이브러리를 직접 관리하면서, 커스텀 프리뷰 웹앱을 통해 컴포넌트를 렌더링·테스트하는 구조였습니다. 하지만 빌드 속도 및 설정 복잡도, 문서화 및 상태 시각화의 부재로 인해 유지보수성과 협업 효율에 한계가 있었습니다. 이를 개선하기 위해 Vite + Storybook 기반의 UI 개발 플랫폼을 재구성하여 팀 생산성과 확장성을 크게 향상시켰습니다.

  • Vite 도입을 통해 빌드 속도 5배 이상 향상, 개발 환경 초기 구동 시간 및 HMR 성능 최적화
  • Storybook으로 디자인 시스템을 모듈화하여 컴포넌트 문서화
  • 디자이너와의 협업 기준점을 Storybook으로 통일해 개발 속도 및 QA 정확도 모두 개선

  핵심 스택: React, TypeScript, Vite, Storybook, Styled-Components

• 에디터 마이그레이션으로 UX 일관성 및 유지보수성 개선

  제품의 코어 부분에 해당하는 기존 에디터(editorJS)가 복잡한 커스텀 노드 구조에 취약해, 커서 오류, 렌더링 병목, 포커스 유실 같은 문제가 반복되며 UX 일관성 저하와 유지보수 부담을 초래했습니다. 이에, 타입 안전성과 구조적 유연성을 제공하는 LexicalJS로 코어 전환을 제안·주도하고, PC·모바일 환경 모두에서 통합적인 입력·렌더링 흐름을 설계했습니다.

  • LexicalJS 전환의 타당성 검토 및 PoC(Proof of Concept) 주도
  • 커스텀 노드·플러그인 아키텍처 설계를 최적화하여 복잡성 감소
  • 기존 JSON 콘텐츠 데이터와의 양방향 호환 로직 설계로 데이터 무손실 이관 달성
  • 렌더링 최적화 및 커서·포커스 처리 개선으로 UX 안정성 강화
  • 타입 기반 API·모듈화 전략으로 에디터 관련 코드에 대한 유지보수 효율을 높이고 개발 속도를 개선

  핵심 스택: LexicalJS, React, WebView (React Native)

• 실시간 AI 콘텐츠 생성 인터랙션 설계 및 상태 일관성 확보

  LLM 기반 콘텐츠 자동 생성 기능을 구현하며, 생성 요청부터 결과 렌더링까지의 비동기 상태 흐름을 설계했습니다. 사용자가 생성 버튼을 클릭한 순간부터 AI 응답이 사이드바에 스트리밍되는 전 과정에서, 대기 → 사고 중 → 생성 중 → 완료/오류의 4단계 UI 상태 전환을 설계해 실시간 피드백과 시각적 일관성을 보장했습니다.

  • 생성기, 사이드바, 버튼 등 다중 컴포넌트 간 상태 동기화 흐름을 설계, UI 의존성을 최소화한 모듈형 구조 구축
  • 반응형 레이아웃 시스템으로 데스크탑/모바일에서 동일한 사용자 경험과 플랫폼별 최적화된 인터랙션 패턴 제공
  • React Streaming과 Intersection Observer를 활용한 실시간 응답 렌더링 시스템으로 생성 과정의 몰입감 극대화
  • 로딩/성공/실패 등 UI 상태 변화를 단계별로 시각화, 버튼/사이드바/결과 영역이 유기적으로 반응하도록 설계
  • 에러 바운더리와 사용자 피드백 루프를 결합해, 생성 실패 시에도 끊김 없는 UX와 복구 가능한 상태 관리 제공

  핵심 스택: React, TypeScript, Context API, Zustand

• PDF 이미지 변환 클라이언트 이전으로 비용 80% 절감 및 안정성 확보

  초기 시스템은 사용자가 업로드한 PDF를 서버에서 이미지로 변환해 전달하는 방식이었지만, 서버 리소스 과다 사용, 디스크 용량 초과, 서버 크래시 등의 문제가 반복되었습니다. 사용자 측에서도 느린 렌더링 속도와 실패율로 UX 불만이 누적되고 있었습니다. 이를 클라이언트 처리 방식으로 전환해 비용 절감과 안정성, UX 모두를 개선했습니다.

  • PDF.js 기반으로 PDF 렌더링을 클라이언트 측으로 이전, 서버 부하 해소
  • 각 페이지를 클라이언트에서 이미지로 파싱, 에디터 내 이미지 노드로 삽입되도록 구조 설계
  • 기존 서버 기반 데이터 흐름과 호환 가능한 포맷 변환 및 리팩토링
  • 렌더링 결과를 실시간으로 노트에 반영해 사용자 대기 시간 최소화
  • 결과적으로 EC2 서버 비용 약 80% 절감, 서버 크래시 100% → 0건, UX 및 유지보수성 대폭 개선

  핵심 스택: PDF.js, React, TypeScript

• 푸시-딥링크 통합으로 사용자 도달률 대폭 향상 및 실험 역량 구축

  초기 앱에는 푸시 알림 시스템이 부재해, 사용자에게 콘텐츠를 재방문 유도할 방법이 전혀 없었습니다. 또한 푸시 기능 도입 후에도 딥링크 연계가 미흡해, 알림을 클릭해도 원하는 화면으로 자연스럽게 이동하지 못하는 UX 문제가 있었습니다. 이에 전체 사용자 플로우를 재설계해 푸시-딥링크-라우팅을 통합하고, 자동화된 콘텐츠 발송·실험 체계를 구축했습니다.

  • AppInitializer 및 Expo Router 구조를 재정비해 푸시 → 딥링크 → 라우팅까지의 플로우를 안정적으로 통합
  • Notifee, Firebase Messaging 기반 푸시 수신 로직 설계 및 조건별 화면 자동 진입 처리
  • EC2 기반 푸시 발송 서버를 Docker로 구축, 사용자 타겟팅 및 퀴즈 콘텐츠 자동 발송 시스템 구현
  • 주요 지표(도달률, 화면 진입률, 반응률) 수집 및 분석 가능하도록 실험 설계
  • UX·인프라를 아우르는 엔드투엔드 제품 설계 경험 확보, 팀의 실험·검증 역량 강화

  핵심 스택: React Native, Expo Router, Notifee, Firebase Messaging, Docker, EC2

• WebView 기반 모바일 환경에서 에디터의 안정적인 UX와 통일된 편집 경험 확보

  React Native + WebView 하이브리드 구조에서 LexicalJS 기반 텍스트 에디터를 모바일로 이식하며 발생한 메시지 통신 지연, 플랫폼별 키보드 충돌, 스크롤·렌더링 동기화 문제를 해결했습니다. 메시지 브리지, 키보드 제어, 반응형 WebView, 플랫폼별 스크롤 최적화를 통해 iOS·Android 간 일관된 편집 경험과 안정적인 UX를 구현했습니다.

  • Cross-Platform 통신 안정화
    • JSON 직렬화 기반 WebView ↔ Native 상태 동기화 브리지 구축
    • 컨텍스트 감지 기반 툴바 UI 자동 전환
  • 키보드·포커스 제어
    • Dual-Layer(네이티브·WebView) 키보드 해제 메커니즘으로 IME 충돌 100% 해결
    • Virtual TextInput 활용해 포커스 하이재킹 방지
  • 반응형 렌더링·스크롤 최적화
    • 좌표 계산·키보드 상태 기반 스크롤 타이밍 조정
    • 플랫폼별 지연 최적화로 iOS·Android 스크롤 차이 보정
  • 결과적으로 WebView 렌더링 파이프라인 최적화, 플랫폼간 편집 UX 일관성 달성

  핵심 스택: LexicalJS, React, WebView (React Native)

• 모바일 앱 론칭 개발 리드로 타겟 유저 확장 및 리텐션 3배 개선

  기존 웹 기반 서비스를 React Native 앱으로 확장하며, 하이브리드 아키텍처 통합, iOS/Android 동시 배포, 모바일 환경 메모리·성능 최적화 과제를 해결했습니다. 앱 구조 설계부터 CI/CD 자동화, 상태 관리, 하이브리드 안정화까지 전 과정에서 개발을 리딩하며 타겟 유저층 확대와 리텐션 개선을 달성했습니다.

  • 확장 가능한 앱 아키텍처 설계
    • Expo + File-based 라우팅으로 개발 효율 향상, 페이지별 코드 스플리팅 자동화
    • Static Framework 설정으로 iOS 빌드 시간 60% 단축
  • CI/CD 자동화
    • Fastlane 기반 iOS·Android 동시 배포, 병렬 빌드로 배포 시간 70% 단축
    • TestFlight·Play Store 자동 업로드, 버전 관리·슬랙 알림으로 QA 사이클 단축
  • 상태 관리 최적화
    • Zustand 모듈별 Store 분리로 불필요한 리렌더링 감소
    • React Query 낙관적 업데이트로 UX 응답성 향상
  • 하이브리드 안정화
    • Native ↔ WebView 브리지 최적화로 상태 일관성 확보
  • 결과적으로 모바일 리텐션 14% → 45% 약 3.2배 향상, QA 소요시간 약 20% 단축

  핵심 스택: React Native, Expo, Zustand, React Query

고피자(GoPizza)

• 백오피스 웹앱 컴포넌트화로 개발 생산성 및 협업 효율 향상

  기존 백오피스 웹앱은 컴포넌트화가 부족해 반복 작업과 CSS 충돌이 빈번했고, 그로 인해 개발 속도가 느려지고 협업 커뮤니케이션 비용이 높았습니다. 저는 신규 기능 개발과 동시에 공통 컴포넌트 설계를 적극적으로 추진해 팀의 생산성과 협업 효율을 끌어올렸습니다.

  • 가맹점 관리자용 유저 관리·스토어 관리 페이지 신규 개발
  • 반복되는 UI를 공통 컴포넌트화하여 재사용성 확보 및 개발 속도 향상
  • Styled-Components, CSS Modules를 활용해 클래스 중첩 문제 해소
  • 디자이너·백엔드 개발자와 협업해 실제 운영에 필요한 비즈니스 흐름을 코드에 반영
  • 결과적으로 신규 페이지 개발 시 반복 작업 감소, QA 오류 건수 감소, 협업 피드백 속도 향상

  핵심 스택: ReactJS, TypeScript, Styled-Components

Certificate & Award

• 2022-2024 BeBridge Hero 3년 연속 수상 비브리지

  BeBridge Hero는 사내 구성원 중 핵심 가치를 가장 잘 실천한 팀원에게 투표를 통해 매년 한 차례 수여되는 상입니다. 3년 연속 수상자로 선정되었으며, 각각 다른 가치 항목에서 리더십과 팀 기여도를 인정받았습니다.

  3년 연속 수상자로 선정되었으며, 각각 다른 가치 항목에서 리더십과 팀 기여도를 인정받았습니다.

  • 2024.12 2024 BeBridge Hero “Aim higher” BeBridge
  • 2023.12 2023 BeBridge Hero “Focus on real value” BeBridge
  • 2022.12 2022 BeBridge Hero “Done is better than perfect” BeBridge

  🔗 2024 수상 소감문 (LinkedIn)

• 2022.03 D.CAMP & D.REAM UX Salon 수료 한국HCI학회

  사용자의 맥락과 흐름을 중심으로 제품을 설계하고 싶은 욕구에서 시작해, 실무 중심의 UX·UI 집중 워크숍 프로그램에 참여했습니다. UX 리서치, 페르소나 설정, 사용자 시나리오 설계, 프로토타이핑, 인터랙션 디자인 전반을 팀 프로젝트 기반으로 실습하며, 기술 중심의 개발자 사고에서 사용자 중심의 사고로 관점을 확장하는 계기가 되었습니다.

Toy Project

• 월경교육을 위한 인터랙티브 웹 Okay to Bleed 2022.07. - 2022.10.

  • URL: https://okaytobleed.com/
  • GitHub: https://github.com/somangoi/okay-to-bleed

  Okay to Bleed는 개발도상국의 소녀들이 월경을 금기시하는 사회 분위기 속에서 월경을 ‘숨겨야 할 일’이 아닌 ‘당연한 신체 경험’으로 인식할 수 있도록 기획된 글로벌 디지털 캠페인입니다. 해당 프로젝트 기획 및 팀 빌딩 총괄과 프론트엔드 개발을 담당하였습니다. 인터랙티브 웹사이트를 통해 스크롤 애니메이션, 일러스트, 모션 그래픽 등 시각적 몰입감을 극대화하여 사용자 친화적인 경험을 구현했습니다.

Tech Stack

• 언어 HTML5/CSS3 JavaScript TypeScript
• 프레임워크 ReactJS
• 상태관리 Zustand Redux React Query
• UI Library Styled-Components emotion tailwind Sass
• 협업 Git Notion

Education

• 2023.03-2025.08 한국방송통신대학교 컴퓨터과학과 학사(GPA 4.1/4.5)
• 2021.06-2021.08 WECODE 프론트엔드 과정 수료
• 2011.03-2017.08 충남대학교 경제학과 학사(GPA 3.3/4.5)

Language

• 한국어 Native proficiency

• 영어 Professional working proficiency

  해외 거주 경험을 바탕으로 영어로의 비즈니스 커뮤니케이션이 원활합니다. 호주에서는 인테리어 스타트업에서 현지 부동산 중개인을 대상으로 고객 관리 업무를 맡았고, 우간다에서는 고위급 정치인 대상 비즈니스 미팅에서 한국어-영어 통역을 진행했습니다.

  • TOEIC 985 (2019.06)
  • OPIC AL (2019.05)

• 일본어 Limited working proficiency

  나고야대학교 교환학생 프로그램(NUPACE) 수료 후 JLPT N1을 취득하였고, 현지인을 대상으로 한국어/영어 과외를 하며 실질적인 의사소통 능력을 다졌습니다.

  • JLPT N1(2015.08.23)

Other Experience (Non-tech)

약 2년간 국제개발협력 활동가로서 베트남, 우간다 등지에서 농가 소득증대를 위해 일했습니다. 이 경험은 개발자로서도 정확한 문제 정의로 임팩트를 만들어내는 힘으로 이어졌습니다.

• 2019-2021 사단법인 굿파머스 국제개발사업팀 간사
• 2017-2018 CJ-KOICA 베트남 CSV 프로젝트 생산관리자 & 프로젝트 사후관리