Frontend Engineer
강태양
요구사항 정의부터 구현까지, 사용자 문제를 제품 경험으로 구체화하는 프론트엔드 엔지니어
주요 업무 및 개선 사례
주식회사 팀마파
Frontend Engineer · 정규직
사내 이슈 관리 시스템 구축
기존 협업 도구 분석과 사용자 피드백을 바탕으로 요구사항·정책·출시 범위를 정의하고, 애플리케이션 개발과 데이터 이전 도구 구현을 1인으로 담당했습니다.
데스크톱 전용 서비스 기기 판별 개선
Sentry 환경 데이터로 갤럭시 태블릿이 Linux PC로 오인되는 원인을 확인하고, 화면·터치·GPU 신호를 조합한 휴리스틱으로 개선했습니다.
관리자 시스템 리뉴얼
Next.js의 주요 기능을 사용하지 않던 관리자 SPA를 Vite 기반으로 전환해 빌드 시간을 약 10분에서 약 30초로 줄이고 변경 경계를 정리했습니다.
사내 이슈 관리 시스템
비개발자 클라이언트와 사내 개발자가 함께 쓰는 도구를 요구사항 정의부터 풀스택 구현, 데이터 이전 준비까지 만들었습니다.
왜 직접 만들었나
Asana·Notion·국내 협업 도구를 비교하고 동료 인터뷰와 클라이언트 피드백을 수집했습니다. 기능 적합성, 민감한 업무정보의 취급, 비개발자의 학습 부담과 반복되는 인당 비용을 함께 검토했습니다.
무엇을 완성 조건으로 삼았나
이슈 등록 → 담당자·상태·우선순위 지정 → 댓글·첨부 공유 → 완료 흐름과 프로젝트별 데이터 격리, 실시간 갱신, 기존 데이터 이전을 출시 게이트로 정의했습니다.
Key decision
필요하지 않은 Organization 권한 계층을 제거했습니다.
초기에는 Organization과 Project를 각각 권한 경계로 구현했습니다. 실제 요구를 다시 검토하자 조직 단위 권한은 필요하지 않았고, 두 계층은 사용자와 구현 모두에 복잡성을 더했습니다.
요구사항·정책 초안, 데이터 모델·API·화면 흐름, 풀스택 구현, 로컬 환경, 테스트, 이전 도구
추진 승인, 요구사항 검토, 운영 배포·DB 등 외부 인프라 설정
실시간 갱신과 데이터 이전
저장과 실시간 전달을 분리
DB 트랜잭션 안
- 01사용자 mutation
- 02DB transaction commit
커밋이 끝난 뒤에만
트랜잭션 밖 · best-effort
- 03SSE invalidation 신호 발행
- 04TanStack Query 캐시 무효화
- 05HTTP 재조회
외부 I/O와 DB 실패 경계를 분리
트랜잭션 밖 · 외부 I/O
첨부 다운로드 → 스토리지 저장
Task 단위 트랜잭션
Task · 담당자 · 댓글 · 첨부 레코드 기록
성공
다음 Task 계속
실패
해당 Task만 롤백
저장한 파일 보상 삭제
첫 단계에서 이미 쓴 파일을 지워 고아 파일을 남기지 않습니다.
현재 사용자 규모에는 단일 인스턴스와 모듈러 모놀리스가 충분하다고 판단했습니다.
저장 성공 여부가 외부 I/O에 좌우되지 않도록 파일 처리와 DB 작업의 실패 경계를 분리했습니다.
현재 상태 실제 PostgreSQL 기반 API E2E와 주요 사용자 시나리오 Playwright E2E를 통과했습니다. 운영 데이터 이전이 완료되어 현재 클라이언트와 함께 실사용 중입니다.
관리자 시스템 리뉴얼
프레임워크를 바꾸는 데서 끝내지 않고, 느린 피드백과 넓은 변경 범위를 함께 줄였습니다.
SSR·SEO·API Routes가 필요하지 않은 내부 운영 도구라는 조건을 확인한 뒤 Vite 전환을 선택했습니다.
- 빌드 약 10분
- 화면·상태·API 책임 결합
- 반복되는 테이블·필터·폼
- 빌드 약 30초
- 라우팅·권한·데이터 계층 분리
- 공통 UI와 데이터 요청 규칙 정리
구조
TanStack Router의 라우팅 계층으로 인증과 권한 흐름을 옮기고, 화면이 API 세부 구현을 직접 알지 않도록 도메인 타입·서비스·훅을 분리했습니다.
운영 경험
반복되는 테이블·필터·폼 패턴을 공통화하고 Storybook과 단위 테스트를 사용해 기능 추가의 기준을 만들었습니다.
갤럭시 태블릿 오인 문제 해결
데스크톱 전용 서비스에 진입한 태블릿을 단순 예외 처리하지 않고, 실제 환경 데이터로 판별 구조의 한계를 찾았습니다.
문제 사용자의 실제 실행 환경 확인
데스크톱 모드에서 Linux x86_64로 바뀐 User-Agent 확인
화면·뷰포트·터치 포인트·WebGL GPU 정보를 조합
터치 노트북 등 일부 조건만 유사한 기기의 오탐 방지
Engineering judgment
브라우저 신호는 식별자가 아니라 휴리스틱입니다.
User-Agent나 WebGL 정보를 단독 기준으로 사용하지 않았습니다. 각 값은 브라우저 설정과 개인정보 보호 정책에 따라 달라질 수 있으므로, 여러 조건이 함께 충족될 때만 모바일 환경으로 분류했습니다.
- 문제 갤럭시 태블릿 정상 구분
- 단일 User-Agent 의존성 제거
- 경계 디바이스를 고려할 수 있는 예외 대응 기반 마련
주요 프로젝트
동글
학생용 동아리 탐색 서비스와 동아리 회장·중앙동아리연합회용 관리 시스템을 함께 운영하는 통합 플랫폼입니다.
- 초기 학생용 앱 담당, 이후 사용자·관리자 앱과 공통 모듈을 Turborepo로 단독 통합
- 직접 배포한 뒤 프론트엔드 유지보수와 기능 개선 전담
- 선택적 캐시 무효화, 한글 IME 검색, 헬스체크 실패 시 이전 릴리스 복구 구현
Next.js · TypeScript · Turborepo · TanStack Query · Playwright · GitHub Actions
전남 청년 문화복지카드 사용처 검색
엑셀로 확인해야 했던 가맹점 정보를 지도에서 검색할 수 있게 만들고, React 웹을 Flutter WebView 앱으로 확장했습니다.
2023 빛가람에너지밸리 소프트웨어 작품 경진대회 입상 · 한전KDN