01
Projects
실생활 경험이나 직접 구상한 브랜드를 바탕으로 기획해 만든 서비스의 1차 화면을 리디자인 · 퍼블리싱한 작업물입니다. 구현에는 Claude Code를 보조 도구로 썼습니다.
02
About
디자인과 구현을 함께 생각하는 방식, 기본 정보, 그리고 여기까지 온 과정입니다.
디자인과 코드를 따로 나누지 않습니다. 화면을 그리는 순간부터 어떤 마크업과 컴포넌트로 만들지, 어떤 상태가 필요한지 함께 고민합니다.
웹 퍼블리싱에서는 시맨틱 마크업과 접근성, 유지보수하기 쉬운 CSS 구조를, 프론트엔드에서는 컴포넌트 단위 설계와 상태 · 라우팅, 화면과 로직의 분리를 중요하게 생각합니다. 그래서 디자인 단계에서 로딩 · 빈 상태 · 오류 같은 화면 상태와 키보드 · 스크린리더 사용까지 함께 정합니다. 개발자 · 디자이너와의 원활한 협업을 중요하게 생각합니다. AI(Claude Code)는 코드 작성을 돕는 도구로 쓰고, 화면 분석 · 디자인 판단 · 결과 확인은 직접 합니다.
- Name
- 김지현
- Role
- Web Publisher
- Focus
- UI 디자인 · 웹 퍼블리싱 · 프론트엔드
- GitHub
- GitHub 프로필(새 창)
Journey여기까지 온 과정
-
2016.06 – 2021.07
쇼핑몰을 만드는 쪽과 고객 쪽에서
(주)베베마루 · (주)케이에스한국고용정보(11번가 고객센터) · ACT company · (주)씨앤제이글로벌
상품 촬영 · 보정과 상품페이지 제작, 자사몰 · 스마트스토어 · 종합몰 운영을 맡았고, 고객센터에서 CS를 응대하며 고객의 문의를 직접 받아 봤습니다.
-
2022.01 – 2024.12
웹사이트 리뉴얼과 개발 협업
한국지급결제 주식회사 · (주)화진바이오코스메틱
회사 홈페이지 유지보수와 디자인 리뉴얼을 맡았고, 개발팀 프로젝트에서 개발자와 처음 협업했습니다. 사내 방송 보조를 하며 영상에 관심이 생겼습니다.
-
2025.04 – 2026.01
영상과 모션
SBS아카데미컴퓨터학원 영상 디자인 과정 · 진지주식회사
프리미어 프로 편집과 애프터 이펙트 모션 그래픽을 배운 뒤, 유튜브 콘텐츠 편집과 행사 촬영으로 실무에 옮겼습니다.
-
2026.05 – 현재
디자인에서 구현으로
패스트캠퍼스구로학원 · 클라우드환경 자바(JAVA) 풀스택 AI융합 웹개발자(AWS, SpringBoot, React.js) · 개인 프로젝트
디자인한 화면을 직접 마크업하고 코드로 구현합니다. 이 포트폴리오의 작업물이 그 결과입니다.
회사에서 만든 결과물은 사내 자산이라 공개하지 않고, 맡은 일과 흐름만 요약했습니다.
03
Skills
디자인 · 웹 퍼블리싱 · 프론트엔드를 하나로 잇는 기술과 기준입니다.
-
HTML5
Publishing
시맨틱 마크업, 문서 구조 설계, SEO를 고려한 메타 정보 작성
쓴 작업물: WayLog, GrowLog, Binwoojin 포트폴리오 사이트
-
CSS3
Publishing
Flex · Grid 레이아웃, 반응형 웹, CSS 변수 기반 디자인 토큰 · 다크 모드, 애니메이션, BEM 방법론
쓴 작업물: Aulo, WayLog, GrowLog, Binwoojin 포트폴리오 사이트
-
Accessibility
Publishing
KWCAG 2.2 · WCAG 2.1 준수, WAI-ARIA, 키보드 · 스크린리더 테스트, axe-core · html-validate 자동 검사
쓴 작업물: Aulo, WayLog, GrowLog, Binwoojin 포트폴리오 사이트
-
JavaScript
Frontend
DOM 조작, 이벤트 처리, 탭 · 슬라이더 · 모달 등 UI 인터랙션 구현
쓴 작업물: Aulo, WayLog, GrowLog, Binwoojin 포트폴리오 사이트
-
React
Frontend
컴포넌트 설계, Hooks 상태 관리, React Router 기반 SPA 화면 구현, Vite 빌드
쓴 작업물: Aulo
-
UI Design
Design
Figma로 화면 · 컴포넌트 설계와 디자인 토큰(색 · 간격 · 글꼴) 정리, 로딩 · 빈 상태 · 오류 같은 화면 상태 설계, 쇼핑몰 실무에서 다진 Photoshop 이미지 보정 · 상품페이지 제작
04
Contact
함께 일할 기회를 기다리고 있습니다. 편하게 연락 주세요.