안녕하세요.
프론트엔드 개발자 김동혁입니다.
센스와 책임감은 남들과 차별되는 저만의 강점입니다.
- 디자인 감각과 흐름을 읽는 눈이 있습니다. UI/UX 개선 아이디어를 자주 제안하고, 프로젝트에 반영한 경험이 많습니다.
- 사용자 경험에 진심입니다. 일상 속 서비스에서도 불편을 관찰하고, 왜 이렇게 만들었을지 고민하는 습관이 있습니다.
- 모든 상황을 예외까지 고려해 판단합니다. 흐름이 끊기지 않는 제품을 만드는 데 집중합니다.
- 기존 방식에 안주하지 않습니다. 더 나은 구조나 새로운 방식이 있다면 주저 없이 실험하고 제안합니다.
- 지킬 수 있는 약속만 합니다. 커뮤니케이션에 신중하고, 책임감 있게 협업합니다.
제품 개발에 폭넓게 기여할 수 있는 역량을 갖추고 있습니다.
- 기획부터 디자인, 프론트엔드 개발까지의 흐름을 이해하고 연결할 수 있는 감각이 있습니다.
- AI 도구를 활용해 Figma 없이도 퀄리티있는 UI를 구현할 수 있으며, 빠르게 기획을 구체화하고 MVP 수준의 프로토타입을 빠르게 제작할 수 있습니다. ⤷ 모아 커뮤니티, ⤷ 포트폴리오
- Next.js, TypeScript 기반의 프론트엔드 개발에 익숙하며, 상태 관리부터 서버 통신, 실시간 기능 구현까지 경험해봤습니다
- 사용자 경험과 데이터를 근거로 기능을 설계하고, 이를 실제로 구현하는 데에 흥미를 느낍니다.
- 제품뿐만 아니라 코드의 구조와 퀄리티를 개선하는 데에도 흥미를 느끼며, Feature-Sliced Design과 같은 아키텍처로 설계와 리팩터링 과정에서 큰 성취감을 느낍니다.
Projects
링킷은 개인과 팀을 효율적으로 연결하는 팀 빌딩 및 네트워킹 플랫폼입니다.
기존 팀 매칭 서비스들의 검색 난이도, 신뢰성 부족, 제한적인 매칭 대상 등의 문제를 해결하고자 시작된 프로젝트입니다.
기존 커뮤니티 기반의 팀 매칭의 한계를 넘어, 기술 스택 기반 매칭, 실시간 채팅, 팀 관리, 포트폴리오 기능까지 포함하여 팀의 시작과 실행을 하나의 흐름으로 연결합니다.
구성원
기획자(1), 디자이너(1), 프론트엔드(1), 백엔드(1)
기여도
100%
기술 스택 & 선정 이유
페이지별로 클라이언트 중심의 렌더링 구조를 유연하게 설계할 수 있어, 기능별 데이터 처리 방식에 맞춰 적용하기 적합했습니다.
상태 관리와 API 연동이 많은 구조에서, 타입으로 흐름을 통제할 수 있어 안정성과 유지보수에 유리했습니다.
서버 상태 관리와 캐싱을 추상화해, 복잡한 화면에서도 데이터 흐름과 코드를 간결하게 유지할 수 있어 적합했습니다
서버 상태 관리와 캐싱을 추상화해, 복잡한 화면에서도 데이터 흐름과 코드를 간결하게 유지할 수 있어 적합했습니다.
클래스 단위로 스타일을 세밀하게 제어할 수 있어 시각적으로 구조를 파악하기 쉬웠고, 개인적인 작업 성향과도 잘 맞았습니다.
채팅방 단위의 메시지 구독 구조를 단순하게 구현할 수 있어, WebSocket과 함께 STOMP를 적용했습니다.
Next.js에 최적화된 환경 덕분에, 빠른 배포와 SSR 대응이 모두 가능해 실 서비스 운영에 적합했습니다.
요약
- 30개 이상의 실제 서비스 화면과 50개 이상의 재사용 컴포넌트를 설계 및 구현하고, 전 화면에서 모바일/데스크톱 반응형 UI를 완벽하게 대응
- 60개 이상의 API 연동 경험을 통해 복잡한 비즈니스 로직과 UI 상태를 안정적으로 연결하고, 유지보수 가능한 구조를 설계
- 기존 Desktop 위주의 디자인 시안을 다양한 디바이스 환경에 최적화된 반응형 UI로 디자인 없이 임의로 구현
- React Query의 prefetchQuery로 데이터를 서버에서 선패칭하고 클라이언트 컴포넌트에서 하이드레이션하여,
CSR 기반 구조에서 발생하던 초기 로딩 지연과 콘텐츠 깜빡임 문제를 해결 - React Query의 Infinite Query와 리스트 가상화를 결합해 무한스크롤 구현, 첫 콘텐츠 로딩 시간 1.5s → 0.3s로 약 80% 단축, 페이지 평균 체류 시간 20% 증가 (GA 기준)
- Feature-Sliced Design 아키텍처를 도입하여 기능 단위 모듈화와 관심사 분리를 통해 코드 가독성과 유지보수성을 향상
WebSocket+STOMP기반의 실시간 채팅 및 알림 시스템 구현,
Zustand 상태 캐싱 전략과 자동 재연결 로직을 통해 안정성과 사용자 경험 개선- SEO와 FCP 개선을 위한 렌더링 최적화 적용으로 크롬 Lighthouse SEO 점수 84 → 100, FCP 1.6s → 0.4s로 단축
- Next.js 13의 중첩 레이아웃 구조를 활용해 모바일과 PC에서 일관된 채팅 UX 제공, 사용자 전환 행동을 고려한 레이아웃 최적화
트러블 슈팅
1. CSR 환경의 느린 초기 로딩 속도와 낮은 SEO 점수로 사용자 경험 저하
문제점
- CSR 방식 사용 시 초기 FCP 평균 1.6초로 사용자 체감 속도 저하
- 검색 엔진 노출에 불리하여 Lighthouse SEO 점수 84점
- 클라이언트에서 모든 데이터를 비동기로 가져오면서 콘텐츠 깜빡임(flickering) 현상 발생
해결 방법
- Next.js App Router 환경에서 React Query의 prefetchQuery를 활용해 서버에서 데이터를 선패칭하고, 클라이언트 컴포넌트에서는 useQuery를 통한 하이드레이션 방식으로 CSR 기반 렌더링 구조를 최적화했습니다.
- 데이터 구조와 페이지 흐름에 맞춰 클라이언트 렌더링의 한계를 보완하고, 초기 화면 완성도와 SEO 접근성을 개선했습니다.
성과
- SEO 점수 84점 → 100점,
- FCP 1.6초 → 0.4초 (약 75% 단축)
- 콘텐츠 깜빡임 현상 해소 및 비로그인 사용자 대상 초기 접근성 향상
2. SSR 환경에서 로컬스토리지 기반 JWT 인증 불가
문제점
- SSR 환경에서는
localStorage에 접근할 수 없어, 클라이언트 저장소 기반 JWT 인증이 동작하지 않음 - 로컬스토리지에 저장된 토큰은 XSS 공격에 매우 취약, 보안상 노출 위험 존재
- SSR과 CSR 간 인증 처리 방식이 달라 코드 중복 및 유지보수 복잡도 증가
해결 방법
- JWT 저장 방식을
HttpOnly 쿠키기반으로 전환하여 클라이언트에서 접근할 수 없도록 조치 - Next.js의
cookies()API를 사용해 SSR 단계에서도 인증 정보를 일관되게 처리 - 쿠키 기반 인증 체계로 전환하며, CSRF 대응을 위한
SameSite속성 및 토큰 검증 로직도 함께 적용해 보안 계층 강화 - 인증 흐름을 클라이언트/서버 공통 구조로 통합하여 코드 중복을 줄이고 유지보수성을 개선
성과
- XSS로 인한 클라이언트 토큰 탈취 위험 제거, 보안성 강화
- 증 흐름 일관성 확보로 CSR/SSR 간 사용자 경험 통합
- 인증 관련 코드 통합 및 간소화로 유지보수 효율 향상
3. 무한스크롤 성능 및 UX 개선
문제점
- 무한스크롤 데이터 로딩 트리거가 페이지 최하단에 있어 추가 로딩 지연으로 인한 UX 저하
- 대용량 리스트 렌더링으로 인한 메모리 사용량 증가
- 스크롤 위치 복원 문제로 인한 사용자 경험 저하
해결 방법
- React Query의 useInfiniteQuery를 사용하여 페이지네이션 로직을 단순화했습니다.
- 가상화 기술을 적용하여 DOM에 실제 보이는 항목만 렌더링하도록 최적화했습니다.
- 데이터 로딩 트리거 지점을 페이지 최하단에서 위로 25% 위치로 조정하여 선로드 전략을 구현했습니다.
- 사용자 스크롤 위치를 SessionStorage에 저장하여 페이지 이동 후에도 경험이 유지되도록 했습니다.
성과
- 첫 콘텐츠 로딩 시간 1.5s → 0.3s로 약 80% 단축
- 메모리 사용량 40% 감소 (크롬 개발자 도구 메모리 프로파일링 기준)
- 페이지 평균 체류 시간 20% 증가 (Google Analytics 기준)
- 모바일 기기에서의 스크롤 성능 및 배터리 효율성 개선
4. 모바일 화면에서 채팅 목록과 채팅창 동시 표시로 가독성 저하
문제점
- 데스크톱 환경에 최적화된 2단 채팅 UI가 모바일에서는 요소 크기가 작아져 사용성 저하
- 모바일에서 채팅 목록과 채팅창 간 전환 시 사용자 경험 불일치
해결 방법
- Next.js 13의 중첩 레이아웃 기능으로 채팅 페이지 구조를 개선했습니다.
- 반응형 디자인을 적용하여 PC에서는 목록과 채팅창을 동시에 표시하도록 했습니다.
- 모바일 최적화를 통해 화면 크기에 따라 자동으로 단일 화면으로 전환되는 UI를 구현했습니다.
- 모바일에서는 직관적인 뒤로가기와 스와이프 액션을 추가하여 자연스러운 화면 전환 경험을 제공했습니다.
Insight
이 프로젝트를 통해 CSR 중심의 구조에서 React Query의 prefetch를 활용한 클라이언트 렌더링 최적화 전략을 설계하고, 인증 방식과 상태 관리, 데이터 패칭 구조를 서비스 흐름에 맞게 재정립하는 경험을 쌓았습니다.
특히 기술적 개선이 SEO 점수, FCP, 페이지 체류 시간 등의 실제 사용자 지표 향상으로 이어지는 과정을 직접 측정하고 개선하며, 데이터 기반의 판단력과 실행력을 키울 수 있었습니다. 또한 Feature-Sliced Design 아키텍처를 도입해 기능 단위로 구조화된 모듈 설계 방식을 익히고, 코드 확장성과 유지보수성을 고려한 설계 역량을 강화했습니다.
본 프로젝트는 개인 기술 브랜딩과 커리어 포지셔닝을 위한 포트폴리오 사이트로, 기획, 디자인, 개발 전반을 1인 주도로 수행했습니다.
기존 노션이나 서핏, Figma 기반 포트폴리오에서 겪었던 자유도 제한과 업데이트 불편을 해결하고자, 정적 사이트로 개발했습니다.
프로젝트를 모노레포 구조로 구성해, 공통 훅을 패키지로 분리하여 관리하고 있습니다.
구성원
개인 프로젝트 (1인)
기여도
100%
100%
기술 스택 & 선정 이유
기타 사용 기술
SEO 최적화와 정적 사이트 생성(SSG) 기능 활용을 위해
정적 타입 기반으로 프로젝트 구조를 명확히 하여 안정성과 유지보수성 확보
유틸리티 클래스 기반 스타일링으로 빠른 UI 작업과 일관성 유지.
일관된 디자인 시스템을 제공하면서도 TailwindCSS와의 통합성이 뛰어나 컴포넌트화에 적합.
모노레포 기반으로 공통 유틸/컴포넌트를 패키지 단위로 분리 관리, 재사용성과 빌드 효율 개선.
요약
- 커스텀 마크업
<sb>,<md>,<link>을 React 엘리먼트로 변환해주는 텍스트 파서 훅을 구현했습니다. - 정적 사이트 생성(SSG)을 적용해 SEO 점수 100점을 달성하고, 빠른 초기 로딩으로 포트폴리오 노출도와 접근성을 동시에 향상시켰습니다.
- 반응형 디자인 설계를 기반으로, 모바일부터 데스크톱까지 전 디바이스에서 일관된 사용자 경험을 제공.
- 모듈화된 컴포넌트 설계로 확장성과 유지보수성을 확보하여 새로운 프로젝트 추가 및 콘텐츠 업데이트 용이
트러블 슈팅
1. Tailwind CSS v4에서 동적으로 생성된 클래스가 적용되지 않음
문제점
- 동적으로 생성된 Tailwind 클래스(text-red-600 등)가 DOM에 존재함에도, 실제 스타일이 적용되지 않음
- 커스텀 태그 파서를 통해 렌더링된 클래스가 정적 분석에 감지되지 않아 최종 CSS에서 누락
- Tailwind v4에서는 기존의 tailwind.config.js 기반 safelist 옵션이 제거됨
해결 방법
- Tailwind CSS v4.1에서 새롭게 도입된
@source inline()지시어를 사용해 문제 해결 global.css파일 상단에@source inline("text-red-600 text-blue-900 font-semibold font-medium hover:text-main-500")형식으로 명시- 기존의 더미 컴포넌트 삽입 방식 대신, Tailwind의 빌드 프로세스에 필요한 클래스를 직접 선언하여 스타일이 누락되지 않도록 처리
성과
- 동적 클래스의 스타일 정상 적용
- 텍스트 파서 기반 커스텀 마크업 UI의 시각적 신뢰도 확보
- 유지보수가 쉬운 방식으로 Tailwind 최신 버전에 대응
Insight
이 포트폴리오 프로젝트는 개인 프로젝트였던 만큼 기획, 디자인, 개발 전반에 있어 높은 자유도를 가지고 설계할 수 있었고, 그 과정에서 저의 스타일을 자연스럽게 담을 수 있었습니다.
특히 제가 중요하게 생각하는 반응형 UI와 사용자 경험(UX)에 대한 기준을, 어떤 제약 없이 스스로 정의하고 구현해볼 수 있는 경험이였습니다.
또한 이전에는 다뤄보지 않았던 SSG(Static Site Generation) 렌더링 방식을 적용해보며, 정적 렌더링의 성능적인 장점을 직접 체감할 수 있었습니다.
무엇보다도 이 프로젝트는 제가 현재 가지고 있는 역량과 스타일을 가장 직접적이고 자유롭게 보여줄 수 있는 결과물이 된 것 같습니다.
IBT는 스타트업 브랜드의 비전과 ESG 가치를 전달하는 정적 웹사이트 구축 프로젝트입니다.
브랜드의 정체성을 시각적으로 표현하는 스냅 스크롤 기반 인터랙티브 랜딩 페이지를 구현하고, 다국어 지원 및 반응형 웹 환경에 중점을 두었습니다.
1개월 간의 외주 협업 프로젝트로, 기획자와 소통하며 기획, 설계, 개발 전반에 참여했습니다.
구성원
프론트엔드(3)
기여도
33%
기술 스택 & 선정 이유
기타 사용 기술
SSG 기반의 빠른 페이지 로딩과 SSR을 혼합해 브랜드 콘텐츠의 신뢰성과 SEO 성능을 모두 확보
브랜드 아이덴티티를 강조하기 위한 스냅 스크롤 기반 인터랙션 및 애니메이션 구현에 최적
정적 사이트에 필요한 일관된 디자인 시스템을 빠르게 구축하고 반응형 디자인에 유리
다국어 상태 전환 등 글로벌 상태 관리가 필요한 부분에서 직관적이고 효율적인 구조를 제공
요약
- 스타트업 브랜드의 ESG 및 정체성을 전달하는 SSG 정적 웹사이트 구축
- Framer Motion + scroll-snap으로 스크롤 인터랙션 중심 랜딩 페이지 구현
- Recoil을 활용한 글로벌 상태 관리로 다국어 전환 기능 개발
- TailwindCSS 기반 반응형 UI로 전 디바이스 일관된 UX 제공
- 디자이너 및 클라이언트와 협업하며 실무 커뮤니케이션 및 피드백 수용 역량 향상
트러블 슈팅
1. 랜딩 페이지 snap scroll 구현 시 UX 및 성능 문제
문제점
- 클라이언트 요구사항으로 각 섹션이 전체 화면에 꽉 차도록 스크롤 시 한 화면씩 이동해야 했음
- 초기에는 JavaScript 기반의 강제 스크롤 로직으로 UX 부자연스러움 발생
- 디바이스 해상도별 화면 정렬 불일치로 UX 일관성 저하
해결 방법
- CSS 기반 scroll-snap-type을 적용해 자연스러운 snap scroll 구현
- TailwindCSS의 snap-scroll 유틸리티를 사용하여 각 섹션을 정렬하고 자바스크립트 코드를 최소화
성과
- 스크롤 렉 및 전환 부자연스러움 해결
- 인터랙션 완성도 및 사용자 몰입도 상승
- 개발 코드의 간결성 확보 및 유지보수 비용 감소
Insight
개발 경험이 많지 않던 시점에 참여한 외주 프로젝트였기에, 정적인 콘텐츠 중심의 반응형 UI 구현에 많은 시간을 투자하며 실질적인 화면 구현 역량을 크게 향상시킬 수 있었습니다.
특히 다양한 기기에서의 레이아웃 대응, 모션 구현, 콘텐츠 배치 등 실제 서비스 수준의 구현 경험을 통해 구조적인 UI 설계 감각을 익혔고,
디자이너 및 클라이언트와의 실무 협업 과정을 거치며 책임감 있는 커뮤니케이션과 피드백 반영의 중요성을 몸소 체득할 수 있었습니다.
모아 커뮤니티는 각 지역 주민들이 자유롭게 소통하고 정보를 나눌 수 있도록 기획된 하이퍼로컬 커뮤니티 플랫폼입니다.
에브리타임처럼 익명 기반 게시판 구조를 중심으로, 동네 인증/게시판 요청 등의 구조를 설계했으며, 반응형 UI와 직관적인 UX에 중점을 두었습니다.
본 프로젝트는 바이브 코딩 기반으로 기획과 실험을 빠르게 반복하며, 실제 서비스 구조를 직접 구상하고 빠르게 구현하는 데 집중한 프로젝트입니다.
2024년 4월 중순부터 시작하여, 사이드 프로젝트 형태로 시간을 투자하며 지속적으로 디벨롭하고 있습니다.
구성원
1인
기여도
100%
100%
기술 스택 & 선정 이유
기타 사용 기술
서버 사이드 렌더링(SSR)을 활용하여 초기 로딩 속도를 개선하고 SEO 최적화가 필요한 커뮤니티 플랫폼에 적합
복잡한 컴포넌트 구조와 데이터 흐름에서 타입 안정성을 확보하여 개발 효율성을 향상
유틸리티 기반 CSS 프레임워크로 일관된 디자인 시스템을 구축하고, 반응형 UI를 효율적으로 개발
초기 비용 없이 인증·DB·스토리지를 통합 제공해, 개인 프로젝트와 MVP 단계에서 빠르고 효율적인 백엔드 구성
접근성과 사용자 경험을 고려한 고품질 컴포넌트 라이브러리로, 일관된 디자인 시스템을 빠르게 구축
요약
- Figma 없이 Cursor AI와 직접 소통하며 UI 구조와 레이아웃을 코드로 바로 설계 및 구현했습니다.
Insight
빠르게 변화하는 AI 시대 속에서, 단순한 개발 역량보다는 기획·디자인·구조 설계·의사 결정과 같은 복합적인 역량이 개발자에게 더 중요해질 것이라 느꼈습니다. 이에 따라, 기술보다는 서비스 구조와 사용자 흐름에 집중하며 전체를 설계하고 실험해보는 프로젝트를 스스로 시작하게 되었습니다.
에브리타임의 구조와 지역 커뮤니티의 특징을 참고해 익명성과 게시판 중심 흐름, 반응형 UI 등을 설계하고, Next.js·TailwindCSS·Supabase 등 기술로 빠르게 MVP를 구현했습니다. 코드를 짜는 것보다 ‘왜 이렇게 만들었는가’를 먼저 고민하며, 기획자·매니저의 시선으로 실행하는 과정 자체가 저에게 큰 성장의 기회가 되었습니다.
Skills
Overall
- 디자인 시안 없이도 AI 도구를 활용해 화면 설계부터 UI 개발까지 빠르게 구현할 수 있습니다.
- 주어진 요구사항을 기능이 아닌 사용자 경험 중심으로 해석하고, 구조적 흐름을 설계하는 데 익숙합니다.
- 단순 구현을 넘어서 “왜 만들고 누구를 위한 것인지”에 대한 고민을 바탕으로 UI/UX를 개선해왔습니다.
- 문제 상황에서 주도적으로 분석하고, 데이터 기반으로 개선 솔루션을 제안할 수 있습니다.
Frontend
- React와 Next.js에 능숙하며, SSR/CSR/ISR 전략을 상황에 맞게 분리 적용할 수 있습니다.
- TypeScript 기반 프로젝트에서 타입을 적극적으로 활용해 예측 가능한 코드를 작성합니다.
- React Query(TanStack Query)를 통한 서버 상태 관리와 prefetchQuery를 활용한 성능 최적화 경험이 있습니다.
- Zustand를 이용해 실시간 기능(WebSocket)에서도 안정적인 상태 관리를 구성할 수 있습니다.
- TailwindCSS와 Shadcn UI로 디자인 시스템 기반의 일관된 UI를 구성할 수 있습니다.
- 브라우저 reflow 발생을 고려한 컴포넌트 구조 설계 및 최적화를 경험했습니다.
- Framer Motion 기반 인터랙션을 통해 섬세한 사용자 경험을 구현할 수 있습니다.
- 디자인 시안과 구현물의 미세한 차이(1px 단위)도 인지하고 조율할 수 있는 감각이 있습니다.
- 반응형 UI와 접근성을 고려한 구조 설계와 개발에 익숙합니다.
Devops
- Vercel을 통한 빠른 배포와 SSR 기반 SEO 최적화 경험이 있습니다.
- pnpm + Turbo 기반 모노레포 구조를 구성하고, 공통 훅 패키지를 분리 관리할 수 있습니다.
Communication
- 협업 시 내가 맡은 작업 외에도 전체 맥락을 이해하고, 주변 작업 흐름에도 관심을 가집니다.
- 문제가 생겼을 때 혼자 오래 붙잡기보다 먼저 공유하고, 함께 해결하는 커뮤니케이션을 중요하게 생각합니다.
- 팀의 방향성과 목표에 동의한다면 주도적으로 아이디어나 개선사항을 제안합니다.
- 내가 한 결정이나 의견에 대해서는 책임감 있게 수행합니다.
- 팀 내에 침묵보다 불편한 진실이 낫다고 생각하며, 건설적인 피드백 문화를 지향합니다.