기획 · 디자인 · 개발을 한 흐름으로 다룹니다
- 프론트엔드 개발
- UI/UX 디자인
- 퍼블리싱
- 데이터베이스
- SEO 최적화
About
사용자와 제품을 함께 보는 프론트엔드 엔지니어
기획 의도를 이해하고, 디자인의 맥락을 살피며, 안정적인 코드로 연결합니다. <br />사용자가 자연스럽게 이해하고 오래 사용할 수 있는 경험을 만드는 데 집중합니다.
소개 더 보기What I Do
화면 하나가 아니라, 만드는 과정 전체를 봅니다
Frontend Engineering
화면을 그리는 데서
멈추지 않습니다
타입으로 규칙을 세우고, 컴포넌트로 반복을 줄이고, 성능까지 확인하며 만듭니다.
다음 사람이 이어서 고칠 수 있는 코드를 남기는 것을 기준으로 삼습니다.
- React · Next.js
- TypeScript 정적 타입
- 반응형 · 접근성
- 성능 · SEO 점검
1export default function ProjectCard
2({ title, tags }: Props) {
3return (
4<article className="card">
5<h3>{title}</h3>
6{tags.map(...)}
7</article>
8);
9}
Preview
Portfolio Renewal
Web Development
2024.03 – 재학중
Education컴퓨터과학 전공
한국방송통신대학교
2025.03 – 2025.08
Education프론트엔드 개발자 부트캠프
오즈코딩스쿨
2023.01 – 2025.03
CareerUI/UX 디자이너 · 퍼블리셔
코어소프트
2021.10 – 2022.12
CareerUI/UX 디자이너 · 퍼블리셔
KNL정보시스템
Selected Work
최근 프로젝트
문제를 정의하고 제품으로 해결한 최근 작업을 소개합니다.
Capabilities
Skills
제품을 완성하는 데 필요한 기술과 도구를 균형 있게 다룹니다.
Frontend
React, Next.js, TypeScript, Tailwind CSS
Backend
Node.js, Express, Firebase
Design
Figma, UI/UX
Tools
Git, Docker, Vercel, AWS
How I Work
이런 순서로 일합니다
요청을 그대로 받아 적기보다, 무엇을 해결하려는 요청인지부터 맞춰 두고 시작합니다.
- Step 1
문제부터 맞춥니다
무엇을 왜 만드는지, 성공을 어떻게 확인할지 먼저 합의합니다.
Output
문제 정의 · 성공 기준 합의
- Step 2
규칙을 세웁니다
색·간격·컴포넌트 상태를 토큰으로 정리해 화면이 늘어나도 흔들리지 않게 합니다.
Output
디자인 토큰 · 컴포넌트 목록
- Step 3
작게 나눠 만듭니다
한 번에 다 만들지 않고, 확인 가능한 단위로 쪼개 리뷰를 받으며 진행합니다.
Output
PR 단위 리뷰 · 동작 확인
- Step 4
배포하고 다듬습니다
배포가 끝이 아니라, 실제 사용 흐름을 보고 걸리는 지점을 이어서 고칩니다.
Output
배포 · 개선 이슈 정리
새로운 기회를 찾고 있습니다
Contact
함께 일해요
새로운 기회를 기다리고 있어요!
귀사의 연락을 기다립니다.
- 정규직 · 계약직 포지션 제안
- 프로젝트 단위 협업 문의
- 포트폴리오 · 이력 관련 질문
또는 바로 메일로 jngmnj4@gmail.com