권동우 (Dongwoo Kwon)
구직 중
프론트엔드 개발자
+82 10-8786-9260
|hyeonggyugwon3@gmail.com
기본 정보
생년월일
2008.04.24 (남, 한국인)
거주지
대한민국 경상북도 경주시
학력 및 병역
학력
대구소프트웨어마이스터고 24.03. ~ 27.02 (졸업 예정)
병역
미필
실패가 즐거운 개발자
보다 나은 개발자가 되기 위해 끊임없이 도전하며, 실패 속에서 배움을 얻고 성장하고 있습니다.
“나를 죽이지 못하는 것은 나를 더 강하게 만든다” 는 니체의 말처럼, 실패를 성장의 발판으로 삼아 더 나은 개발자로 나아가고 있습니다.
기술 스택
Languages
JavaPythonFrontend
ZustandStorybookBackend
Deployment
Tools
대표 프로젝트
Sync SaaS
2025.03 ~ 2025.10팀원
총 7명
|
프론트엔드 4명(본인포함)
|
백엔드 3명
본인 역할: Frontend Developer & UI/UX Designer
개요
디자이너, 기획자 같은 비개발자와 개발자 간의 기술 격차로 인해 발생하는 의사소통 문제와 협업 비효율을 해결하기 위한 AI 기반 프로젝트 관리 데스크톱 앱입니다. 지식 격차를 AI가 보완하고, 팀원 간 실시간 협업 환경을 제공하는 것이 핵심 목표입니다.
핵심 문제
현업에서는 디자이너, PM(프로덕트 매니저), 기획자 등 비개발자와 개발자 간의 협업이 필수적이다. 하지만 이들 사이에는 뚜렷한 기술 격차가 존재한다. 비개발자는 서비스 방향성과 시장의 흐름을 가장 잘 이해하지만, 개발 지식이 부족해 개발자와의 소통에 어려움을 겪는다. 개발자는 기술적 문제를 해결할 수 있지만, 때로는 사용자의 맥락이나 비즈니스 니즈를 놓칠 수 있다. 이러한 협업의 단절은 프로젝트 방향성 왜곡, 시간 낭비, 피로감을 초래한다.
해결 아이디어
- 비개발자는 AI의 도움을 받아 기술적 이해도를 높이고, 자신의 의도를 더 정확하게 표현할 수 있다. - 개발자는 비개발자의 요구사항을 명확하게 이해하고, 실시간 협업 에디터를 통해 즉시 피드백하고 구현할 수 있다. - 개발자와 비개발자의 커뮤니케이션을 최소 비용으로 만든다.
주요 기능
- 워크스페이스, 프로젝트 기반 팀 협업 (생성/참여/초대/워크스페이스, 프로젝트 멤버 관리) - 이슈 트래킹 시스템 (상태 관리, 담당자 지정, 댓글) - 칸반 보드 (드래그&드롭 작업 관리) - Docs 문서 (기능명세서, 기능명세서 기반 ERD 자동생성) - 대시보드 & 분석 (차트, 진행률 시각화) - AI 기능 (단어 정의 검색, 프로젝트의 컨텍스트를 이해한 챗봇)
기술 스택
React
상태 변화가 많은 화면을 빠르게 구성하기 위해 선택. 컴포넌트 기반으로 UI를 구성하고 효율적인 상태 관리가 가능.
TypeScript
협업과 유지보수에 필요한 타입 안정성을 확보하기 위해 사용. JavaScript의 동적 타입을 보완해 주며, 코드 품질 향상 및 버그 예방.
Electron
기존에 익숙한 웹 기술을 활용해 데스크탑 앱을 개발하기 위함. macOS와 Windows 등 다양한 환경에서 동일한 UX를 제공하기 위한 멀티 플랫폼 지원. 브라우저 환경과 유사한 개발 흐름을 유지하며 개발 속도와 생산성을 확보할 수 있음.
Styled-components
컴포넌트 단위로 스타일을 일관성 있게 관리하기 위해 사용. CSS-in-JS 방식을 통해 스타일과 로직을 동일한 파일 내에서 관리하며, 코드의 유지보수성을 높임.
주요 활동
디자인 시스템 구축 (sync-design-system)
UI와 컴포넌트의 일관성이 부족해 유지보수와 재사용에 어려움이 있었습니다. 이를 해결하기 위해 재사용 가능한 공통 컴포넌트 15개를 추출했습니다. 추출한 컴포넌트는 npm 패키지(@sync-design-system)로 배포하여 팀 내에서 공유했습니다. Storybook을 활용해 컴포넌트를 문서화하고 사용 가이드를 제공했습니다. 체계적인 컴포넌트 설계를 통해 개발 효율을 높이고 UI 일관성을 확보했습니다.
React Query 캐싱으로 이슈 페이지 로딩 시간 단축
사용자가 이슈 목록과 상세 페이지를 이동할 때마다 API가 재호출되어 평균 2초의 로딩 시간이 발생하고, 동일한 데이터를 반복 요청해 서버 부하가 증가하는 문제가 있었습니다. 이를 해결하기 위해 React Query를 도입해 이슈 데이터를 자동으로 캐싱하도록 개선했습니다. 이슈 목록은 비교적 자주 변경되는 데이터 특성을 고려해 staleTime을 2분으로 설정하고, 신선한 데이터는 재요청 없이 즉시 표시되도록 구성했습니다. 그 결과 캐싱 전략을 통해 성능과 사용자 경험을 동시에 개선할 수 있었습니다.
낙관적 업데이트로 할 일 체크 반응성 개선
할 일 완료 체크 시 서버 응답을 기다리면서 0.5~1초의 지연이 발생해 사용자 경험이 저하되는 문제가 있었습니다. 이를 해결하기 위해 React Query의 낙관적 업데이트를 적용해 사용자 입력 즉시 UI가 반영되도록 개선했습니다. 그 결과 체감 응답 속도를 평균 800ms에서 0ms 수준으로 단축할 수 있었습니다. 또한 네트워크 요청 실패 시 자동 롤백과 에러 토스트를 제공해 안정적인 사용자 경험을 유지했습니다.
불필요한 스켈레톤 UI 제거
워크스페이스 카드에 스켈레톤 UI를 적용했으나 로딩 시 짧게 나타났다 사라지는 플래시 현상이 발생했습니다. Chrome DevTools로 API 응답 시간을 측정한 결과 평균 180ms로 매우 짧은 로딩 시간이 확인되었습니다. 이로 인해 스켈레톤 UI가 표시되자마자 사라지며 시각적 노이즈로 작용하는 문제가 있었습니다. 스켈레톤 UI를 제거하고 데이터 도착 즉시 콘텐츠를 렌더링하도록 개선해 깜빡임 없는 깔끔한 로딩 경험을 제공했습니다.
베타테스트 랜딩 페이지(sync introduce) 개발
GitHub Pages와 커스텀 도메인을 활용해 베타테스트 신청용 랜딩 페이지를 구축했습니다. GitHub Releases 기반으로 Windows와 macOS 설치 파일을 배포했습니다. 이를 통해 제품 검증을 위한 효율적인 베타 배포 전략을 수립하고 실행한 경험을 쌓았습니다.
SEO 최적화를 통해 자연 검색 유입 개선
Sync Desktop의 검색 노출 개선과 자연 유입 증대를 위해 랜딩 페이지(Sync-introduce)의 SEO 최적화를 진행했습니다. sitemap.xml과 robots.txt 설정, 메타태그 최적화를 통해 검색엔진 크롤링 효율을 개선했습니다. 커스텀 도메인을 적용하고 Lighthouse 기준 SEO 점수 100점을 달성했습니다. 기술적 SEO 구현을 통해 유기적인 사용자 유입 경로를 확보했습니다. 이 과정을 통해 검색엔진 크롤링 메커니즘에 대한 이해와 기술적 구현 경험을 쌓았습니다.
트러블 슈팅
SSE 스트리밍 응답의 과도한 리렌더링 최적화
SSE를 활용해 사용자가 텍스트를 드래그하면 실시간으로 AI가 단어를 설명해주는 기능을 구현하던 중, 응답이 화면에 표시되는 동안 화면이 끊기고 버벅거리는 문제가 발생했습니다.
매 청크 수신마다 setState가 호출되어 n개의 청크를 받을 경우 n번의 리렌더링이 발생했고, 이로 인해 매번 Virtual DOM 생성과 Diffing 과정이 반복되면서 전체 성능 저하로 이어졌습니다.
이 문제를 해결하기 위해 Thrott ling과 Debouncing의 두 가지 방식을 고민하였습니다. Throttling - 일정 간격마다 렌더링을 시도하기 때문에 타이핑 효과가 일정하고 부드러움 - 그러나 새로운 청크가 도착하지 않는 구간에서도 주기적으로 렌더링이 발생하여, 불필요한 렌더링이 발생됨 Debouncing - 청크가 연속적으로 수신되는 동안에는 렌더링을 지연 - 일정 시간동안 새로운 청크가 수신되지 않을 때 한 번만 렌더링 실행 Thrott ling은 타이핑 애니메이션이 자연스럽다는 장점이 있었지만, 불필요한 렌더링이 발생해 성능적인 문제가 남아 있었음. 반면 Debouncing은 타이핑 효과는 약간 덜 자연스러울 수 있으나, 렌더링 횟수를 크게 줄여 UI 끊김 문제를 가장 효과적으로 해소할 수 있었음. 이러한 이유로 최종적으로 Debouncing 방식을 선택했습니다.
Debouncing + useRef 기반 버퍼링 패턴 적용 useRef를 중간 버퍼로 활용해 리렌더링 없이 데이터를 누적했습니다. 연속으로 도착하는 청크로 인한 잦은 렌더링을 방지하기 위해 50ms 디바운싱을 적용했습니다. 이전 타이머를 취소하고 마지막 청크 기준으로 한 번만 setState가 호출되도록 처리했습니다. 그 결과 청크는 실시간으로 버퍼에 쌓이되, 50ms 동안 추가 입력이 없을 때만 화면이 갱신되도록 최적화했습니다.
setState 호출 횟수를 대폭 줄여 UI 끊김 문제를 해결했습니다. Throttling과 Debouncing 등 렌더링 최적화 기법을 실전에서 적용한 경험을 쌓았습니다. 이를 통해 React의 렌더링 메커니즘에 대한 깊이 있는 이해를 확보했습니다.
느낀 점
7개월 동안 팀 프로젝트를 진행하며 팀워크는 저절로 만들어지지 않는다는 것을 깨달았습니다. 서로의 경험이 달라 의견 충돌도 있었고, 의도를 충분히 이해하지 못해 어려움을 겪기도 했습니다. 하지만 대화를 통해 작은 오해도 금방 풀 수 있었고, 문제 해결보다 중요한 것은 서로를 이해하려는 태도라는 것을 배웠습니다. 이번 프로젝트를 통해 기능을 만드는 것뿐 아니라, 팀이 함께 성장하는 과정의 가치를 느낄 수 있었습니다.
기타 활동
FIX 2025 대한민국 ICT 융합 엑스포 부스 운영
2025.10.22 ~ 2025.10.25
2025 IT CE 프로젝트 3등 수상
2025.10.24
참고 자료
Sync-Desktop 소스코드
https://github.com/AICT-SYNC/sync-desktopSync Design System 소스코드
https://github.com/AICT-SYNC/sync-design-systemSync Design System NPM
https://npmjs.com/package/sync-design-systemSync Introduce 소스코드
https://github.com/AICT-SYNC/sync-introducesync-saas 홈페이지(서비스 종료)
https://sync-saas.com자격 및 역량 인증
마지막 수정일: 2026.01.06
작성자: 권동우 (Dongwoo Kwon)