Crafting Digital
Experiences
프론트엔드 중심 풀스택 개발자. 직접 만들어보면서 배우는 걸 좋아합니다.
about me몽이
이 마을에 사는 작은 토끼이 마을에 사는 꿈을 닮은 작은 토끼, 몽(夢)이를 소개할게요. 이름에는 밤에 꾸는 꿈도, 낮에 품는 꿈도 모두 담겨 있어요.
사소한 것도 놓치지 않는 커다란 눈망울, 사람들의 목소리에 귀 기울이는 쫑긋한 귀가 자랑이랍니다.
호기심이 많아 새로운 것에 쉽게 반응하지만, 살짝 겁이 많아서 갑자기 다가가면 깜짝 놀라요.
Profile
만드는 게 좋아서 개발을 시작했습니다.
대학에서 컴퓨터공학을 전공하면서 웹 개발에 관심을 갖게 됐고, 프론트엔드부터 백엔드까지 직접 만져보면서 공부했습니다. 특히 화면에 바로 결과가 보이는 프론트엔드 쪽이 잘 맞았습니다.
이 포트폴리오도 직접 기획부터 개발까지 했고, 그 과정에서 GSAP, Framer Motion 같은 애니메이션 라이브러리도 익혔습니다. 모르는 건 부딪혀보면서 배우는 편입니다.
GitHub
@hyeoniverse- 공개 저장소
- 0
- 받은 스타
- 0
- 팔로워
- 0
- 함께한 햇수
- 0년
- 최근 활동
- 2026년 11월
- TypeScript50%
- JavaScript25%
- CSS13%
- HTML13%
Pinned
@hyeoniverse- web-portfolio-hyeoniverse흩어져 있던 프로젝트와 글을 한 곳에서 보여 주고 계속 편하게 갱신하기 위해 만든 개인 포트폴리오 페이지입니다. 공개 페이지, 디자인 시스템, 글 편집기와 관리자 CMS 까지 설계했습니다.cmseditornextjsTypeScript2026년 10월
- MacFolioTypeScript2026년 10월
- SproutFarm제한 시간 전까지 동물을 포획하는 탑다운 2D 픽셀 게임. Unity로 만들고 WebGL로 빌드해 웹에 배포했습니다. 20×20 타일맵 4장이 플레이어를 따라다니는 무한 맵, 청크 좌표 해시로 같은 지형 재생성, A* 경로 탐색으로 도망·추적하는 동물 AI, 서버리스 함수와 Redis로 상위 10위 랭킹2d-gamegameunityJavaScript2026년 10월
- QRUQRU는 “QR” + “Who Are You”를 결합한 말로, 사용자가 자신의 정보를 입력하여 QR 코드를 생성하고 이를 통해 디지털 명함을 공유할 수 있는 웹 애플리케이션입니다.TypeScript2026년 10월
Experience
- K-Digital Training - React·TypeScript·Node.js 기반의 웹 개발 및 API·DB·상태 관리·배포 등의 풀 사이클 개발 능력 학습 - Node.js, Express, TypeScript 학습 - React 기반의 프론트엔드 개발 학습 - SQL 데이터베이스 설계 및 쿼리 작성 - 프론트엔드와 백엔드 양쪽에서의 테스트 학습 실시 - AWS 기반의 배포 경험
KISA·본선(발표 평가) 진출
Skills
Frontend
가장 오래 다루었고, 가장 자신 있는 분야입니다. 이 포트폴리오 사이트를 포함해 거의 모든 프로젝트를 React + TypeScript 기반으로 제작했습니다.
React / Next.js
이 포트폴리오를 Next.js App Router 기반으로 처음부터 설계해서 제작했습니다. SSR과 동적 라우팅을 적용하고, next/image로 이미지 최적화도 직접 처리했습니다. 컴포넌트 구조를 분할하여 재사용 가능하도록 설계하는 것에 주력하고 있습니다.
TypeScript
모든 프로젝트에서 TypeScript를 사용합니다. 인터페이스로 데이터 구조를 정의하고, 제네릭이나 유니온 타입 같은 기능도 필요할 때 자연스럽게 활용합니다. 타입 덕분에 리팩토링 시 실수가 대폭 줄었습니다.
HTML / CSS
이 사이트의 모든 스타일을 CSS Modules로 직접 작성했습니다. CSS 커스텀 프로퍼티로 테마 시스템을 구성하고, clamp()와 미디어 쿼리를 조합하여 반응형 레이아웃을 설계했습니다.
Tailwind CSS
팀 프로젝트에서 Tailwind를 사용해봤습니다. 유틸리티 클래스 기반으로 빠르게 스타일링하는 방법에 익숙하며, 커스텀 설정도 다루었습니다.
Skills
Animation & Interaction
이 포트폴리오를 만들면서 본격적으로 깊게 빠진 분야입니다. 스크롤 한 번에 화면이 생생해지는 것이 즐거워서, 점점 복잡한 인터랙션에 도전하게 되었습니다.
GSAP / ScrollTrigger
이 사이트의 가로 스크롤 갤러리, 무한 루프 스크롤, 스크롤 기반의 등장 애니메이션을 모두 GSAP으로 구현했습니다. requestAnimationFrame 기반의 커스텀 스크롤 시스템도 직접 만들었으며, ScrollTrigger로 섹션별 애니메이션 타이밍을 세밀하게 제어합니다.
Framer Motion
페이지 전환 애니메이션, 마우스를 따라가는 패럴랙스 효과, 호버 시 반응하는 인터랙션 등에 활용합니다. useSpring과 useTransform의 조합으로 물리 기반의 자연스러운 동작을 구현합니다.
CSS Animations
keyframe 애니메이션과 transition을 상황에 맞게 설계합니다. 다크/라이트 테마 전환 효과나 로딩 애니메이션 등에 적용하며, CSS만으로 해결 가능한 것은 굳이 JS 라이브러리를 사용하지 않습니다.
Lottie / Three.js
Lottie로 디자이너가 제작한 애니메이션을 웹에 적용한 경험이 있습니다. Three.js는 아직 기초 단계이지만, 3D 웹 표현에 관심이 있어 계속 학습하고 있습니다.
Skills
Backend & Infra
프론트엔드가 주력이지만, 필요하면 API 서버도 직접 만듭니다. 풀스택으로 하나의 프로젝트를 처음부터 끝까지 혼자 운영할 수 있는 수준입니다.
Node.js / Express
Express로 REST API 서버를 구축한 경험이 있습니다. 라우트 분리, 미들웨어 설계, JWT 기반의 인증까지 직접 구현했으며, 에러 핸들링 구조도 구축했습니다.
PostgreSQL / MongoDB
PostgreSQL로 관계형 DB 스키마를 설계하고 쿼리를 작성해봤고, MongoDB로 비정형 데이터도 다루어봤습니다. ORM은 주로 Prisma를 사용합니다.
REST API / GraphQL
RESTful API를 설계해서 구현하는 것은 여러 번 해봤습니다. GraphQL은 클라이언트 쪽에서 Apollo Client로 데이터를 가져오는 방식으로 사용해봤습니다.
Vercel / Docker
이 포트폴리오를 Vercel에 배포해서 운영 중이며, 환경 변수 관리나 도메인 설정도 직접 하고 있습니다. Docker는 개발 환경 세팅이나 간단한 컨테이너 구성에 활용해봤습니다.
Skills
Design & Tools
디자이너는 아니지만, 간단한 안이나 프로토타입 정도는 직접 만들 수 있습니다. 기획에서 디자인, 개발까지 혼자 진행하는 것을 좋아합니다.
Figma
와이어프레임과 프로토타입을 직접 만듭니다. 이 포트폴리오의 초안도 Figma에서 작성했으며, 컴포넌트 시스템과 오토레이아웃도 활용하고 있습니다.
UI/UX Design
사용자 흐름을 먼저 그린 후 반응형 레이아웃을 직접 기획합니다. 디자인으로 끝나지 않고 코드로 구현하는 것까지 연결되는 것이 제 방식입니다.
Webflow / No-Code
코드 없이 빠르게 랜딩페이지를 만들어야 할 때는 Webflow를 활용합니다. 간단한 마케팅 페이지나 프로토타입용으로 사용해봤습니다.
Git / VS Code
Git에서 브랜치 전략을 세우고 PR 기반의 워크플로우를 사용하고 있습니다. VS Code에서는 단축키와 확장 기능을 적극 활용하여 작업 속도를 높이고 있습니다.
Principles
Just Build It
생각하기만 해서는 끝내지 않으므로, 먼저 만들어보고 수정합니다.
Readable Code
나중에 다시 봤을 때 이해할 수 있는 코드를 작성하도록 하고 있습니다.
Keep Learning
모르는 것은 당연하며, 찾아서 해결하는 것이 실력이라고 생각합니다.
Workflow
Research
무엇을 만들 것인지, 어떤 구조가 올바른지 먼저 탐색합니다.
Prototype
간단한 안이나 프로토타입을 먼저 만듭니다.
Build
코드를 작성하면서 작동하지 않는 부분은 즉시 수정합니다.
Improve
완성 후에도 사용하면서 불편한 부분을 지속적으로 수정합니다.
Certifications & Awards
Certifications
TOEIC 775
ETS정보처리기사
한국산업인력공단Awards
2022년 졸업 프로젝트 평가회
서울여자대학교 정보보호학과2023년 프로보노 공모전 동상
한국정보방송통신대연합Designed & Developed with ❤ by HYEON
Design SystemCrafting Digital
Experiences
프론트엔드 중심 풀스택 개발자. 직접 만들어보면서 배우는 걸 좋아합니다.
about me몽이
이 마을에 사는 작은 토끼이 마을에 사는 꿈을 닮은 작은 토끼, 몽(夢)이를 소개할게요. 이름에는 밤에 꾸는 꿈도, 낮에 품는 꿈도 모두 담겨 있어요.
사소한 것도 놓치지 않는 커다란 눈망울, 사람들의 목소리에 귀 기울이는 쫑긋한 귀가 자랑이랍니다.
호기심이 많아 새로운 것에 쉽게 반응하지만, 살짝 겁이 많아서 갑자기 다가가면 깜짝 놀라요.
Profile
만드는 게 좋아서 개발을 시작했습니다.
대학에서 컴퓨터공학을 전공하면서 웹 개발에 관심을 갖게 됐고, 프론트엔드부터 백엔드까지 직접 만져보면서 공부했습니다. 특히 화면에 바로 결과가 보이는 프론트엔드 쪽이 잘 맞았습니다.
이 포트폴리오도 직접 기획부터 개발까지 했고, 그 과정에서 GSAP, Framer Motion 같은 애니메이션 라이브러리도 익혔습니다. 모르는 건 부딪혀보면서 배우는 편입니다.
GitHub
@hyeoniverse- 공개 저장소
- 0
- 받은 스타
- 0
- 팔로워
- 0
- 함께한 햇수
- 0년
- 최근 활동
- 2026년 11월
- TypeScript50%
- JavaScript25%
- CSS13%
- HTML13%
Pinned
@hyeoniverse- web-portfolio-hyeoniverse흩어져 있던 프로젝트와 글을 한 곳에서 보여 주고 계속 편하게 갱신하기 위해 만든 개인 포트폴리오 페이지입니다. 공개 페이지, 디자인 시스템, 글 편집기와 관리자 CMS 까지 설계했습니다.cmseditornextjsTypeScript2026년 10월
- MacFolioTypeScript2026년 10월
- SproutFarm제한 시간 전까지 동물을 포획하는 탑다운 2D 픽셀 게임. Unity로 만들고 WebGL로 빌드해 웹에 배포했습니다. 20×20 타일맵 4장이 플레이어를 따라다니는 무한 맵, 청크 좌표 해시로 같은 지형 재생성, A* 경로 탐색으로 도망·추적하는 동물 AI, 서버리스 함수와 Redis로 상위 10위 랭킹2d-gamegameunityJavaScript2026년 10월
- QRUQRU는 “QR” + “Who Are You”를 결합한 말로, 사용자가 자신의 정보를 입력하여 QR 코드를 생성하고 이를 통해 디지털 명함을 공유할 수 있는 웹 애플리케이션입니다.TypeScript2026년 10월
Experience
- K-Digital Training - React·TypeScript·Node.js 기반의 웹 개발 및 API·DB·상태 관리·배포 등의 풀 사이클 개발 능력 학습 - Node.js, Express, TypeScript 학습 - React 기반의 프론트엔드 개발 학습 - SQL 데이터베이스 설계 및 쿼리 작성 - 프론트엔드와 백엔드 양쪽에서의 테스트 학습 실시 - AWS 기반의 배포 경험
KISA·본선(발표 평가) 진출
Skills
Frontend
가장 오래 다루었고, 가장 자신 있는 분야입니다. 이 포트폴리오 사이트를 포함해 거의 모든 프로젝트를 React + TypeScript 기반으로 제작했습니다.
React / Next.js
이 포트폴리오를 Next.js App Router 기반으로 처음부터 설계해서 제작했습니다. SSR과 동적 라우팅을 적용하고, next/image로 이미지 최적화도 직접 처리했습니다. 컴포넌트 구조를 분할하여 재사용 가능하도록 설계하는 것에 주력하고 있습니다.
TypeScript
모든 프로젝트에서 TypeScript를 사용합니다. 인터페이스로 데이터 구조를 정의하고, 제네릭이나 유니온 타입 같은 기능도 필요할 때 자연스럽게 활용합니다. 타입 덕분에 리팩토링 시 실수가 대폭 줄었습니다.
HTML / CSS
이 사이트의 모든 스타일을 CSS Modules로 직접 작성했습니다. CSS 커스텀 프로퍼티로 테마 시스템을 구성하고, clamp()와 미디어 쿼리를 조합하여 반응형 레이아웃을 설계했습니다.
Tailwind CSS
팀 프로젝트에서 Tailwind를 사용해봤습니다. 유틸리티 클래스 기반으로 빠르게 스타일링하는 방법에 익숙하며, 커스텀 설정도 다루었습니다.
Skills
Animation & Interaction
이 포트폴리오를 만들면서 본격적으로 깊게 빠진 분야입니다. 스크롤 한 번에 화면이 생생해지는 것이 즐거워서, 점점 복잡한 인터랙션에 도전하게 되었습니다.
GSAP / ScrollTrigger
이 사이트의 가로 스크롤 갤러리, 무한 루프 스크롤, 스크롤 기반의 등장 애니메이션을 모두 GSAP으로 구현했습니다. requestAnimationFrame 기반의 커스텀 스크롤 시스템도 직접 만들었으며, ScrollTrigger로 섹션별 애니메이션 타이밍을 세밀하게 제어합니다.
Framer Motion
페이지 전환 애니메이션, 마우스를 따라가는 패럴랙스 효과, 호버 시 반응하는 인터랙션 등에 활용합니다. useSpring과 useTransform의 조합으로 물리 기반의 자연스러운 동작을 구현합니다.
CSS Animations
keyframe 애니메이션과 transition을 상황에 맞게 설계합니다. 다크/라이트 테마 전환 효과나 로딩 애니메이션 등에 적용하며, CSS만으로 해결 가능한 것은 굳이 JS 라이브러리를 사용하지 않습니다.
Lottie / Three.js
Lottie로 디자이너가 제작한 애니메이션을 웹에 적용한 경험이 있습니다. Three.js는 아직 기초 단계이지만, 3D 웹 표현에 관심이 있어 계속 학습하고 있습니다.
Skills
Backend & Infra
프론트엔드가 주력이지만, 필요하면 API 서버도 직접 만듭니다. 풀스택으로 하나의 프로젝트를 처음부터 끝까지 혼자 운영할 수 있는 수준입니다.
Node.js / Express
Express로 REST API 서버를 구축한 경험이 있습니다. 라우트 분리, 미들웨어 설계, JWT 기반의 인증까지 직접 구현했으며, 에러 핸들링 구조도 구축했습니다.
PostgreSQL / MongoDB
PostgreSQL로 관계형 DB 스키마를 설계하고 쿼리를 작성해봤고, MongoDB로 비정형 데이터도 다루어봤습니다. ORM은 주로 Prisma를 사용합니다.
REST API / GraphQL
RESTful API를 설계해서 구현하는 것은 여러 번 해봤습니다. GraphQL은 클라이언트 쪽에서 Apollo Client로 데이터를 가져오는 방식으로 사용해봤습니다.
Vercel / Docker
이 포트폴리오를 Vercel에 배포해서 운영 중이며, 환경 변수 관리나 도메인 설정도 직접 하고 있습니다. Docker는 개발 환경 세팅이나 간단한 컨테이너 구성에 활용해봤습니다.
Skills
Design & Tools
디자이너는 아니지만, 간단한 안이나 프로토타입 정도는 직접 만들 수 있습니다. 기획에서 디자인, 개발까지 혼자 진행하는 것을 좋아합니다.
Figma
와이어프레임과 프로토타입을 직접 만듭니다. 이 포트폴리오의 초안도 Figma에서 작성했으며, 컴포넌트 시스템과 오토레이아웃도 활용하고 있습니다.
UI/UX Design
사용자 흐름을 먼저 그린 후 반응형 레이아웃을 직접 기획합니다. 디자인으로 끝나지 않고 코드로 구현하는 것까지 연결되는 것이 제 방식입니다.
Webflow / No-Code
코드 없이 빠르게 랜딩페이지를 만들어야 할 때는 Webflow를 활용합니다. 간단한 마케팅 페이지나 프로토타입용으로 사용해봤습니다.
Git / VS Code
Git에서 브랜치 전략을 세우고 PR 기반의 워크플로우를 사용하고 있습니다. VS Code에서는 단축키와 확장 기능을 적극 활용하여 작업 속도를 높이고 있습니다.
Principles
Just Build It
생각하기만 해서는 끝내지 않으므로, 먼저 만들어보고 수정합니다.
Readable Code
나중에 다시 봤을 때 이해할 수 있는 코드를 작성하도록 하고 있습니다.
Keep Learning
모르는 것은 당연하며, 찾아서 해결하는 것이 실력이라고 생각합니다.
Workflow
Research
무엇을 만들 것인지, 어떤 구조가 올바른지 먼저 탐색합니다.
Prototype
간단한 안이나 프로토타입을 먼저 만듭니다.
Build
코드를 작성하면서 작동하지 않는 부분은 즉시 수정합니다.
Improve
완성 후에도 사용하면서 불편한 부분을 지속적으로 수정합니다.
Certifications & Awards
Certifications
TOEIC 775
ETS정보처리기사
한국산업인력공단Awards
2022년 졸업 프로젝트 평가회
서울여자대학교 정보보호학과2023년 프로보노 공모전 동상
한국정보방송통신대연합Designed & Developed with ❤ by HYEON
Design SystemCrafting Digital
Experiences
프론트엔드 중심 풀스택 개발자. 직접 만들어보면서 배우는 걸 좋아합니다.
about me몽이
이 마을에 사는 작은 토끼이 마을에 사는 꿈을 닮은 작은 토끼, 몽(夢)이를 소개할게요. 이름에는 밤에 꾸는 꿈도, 낮에 품는 꿈도 모두 담겨 있어요.
사소한 것도 놓치지 않는 커다란 눈망울, 사람들의 목소리에 귀 기울이는 쫑긋한 귀가 자랑이랍니다.
호기심이 많아 새로운 것에 쉽게 반응하지만, 살짝 겁이 많아서 갑자기 다가가면 깜짝 놀라요.
Profile
만드는 게 좋아서 개발을 시작했습니다.
대학에서 컴퓨터공학을 전공하면서 웹 개발에 관심을 갖게 됐고, 프론트엔드부터 백엔드까지 직접 만져보면서 공부했습니다. 특히 화면에 바로 결과가 보이는 프론트엔드 쪽이 잘 맞았습니다.
이 포트폴리오도 직접 기획부터 개발까지 했고, 그 과정에서 GSAP, Framer Motion 같은 애니메이션 라이브러리도 익혔습니다. 모르는 건 부딪혀보면서 배우는 편입니다.
GitHub
@hyeoniverse- 공개 저장소
- 0
- 받은 스타
- 0
- 팔로워
- 0
- 함께한 햇수
- 0년
- 최근 활동
- 2026년 11월
- TypeScript50%
- JavaScript25%
- CSS13%
- HTML13%
Pinned
@hyeoniverse- web-portfolio-hyeoniverse흩어져 있던 프로젝트와 글을 한 곳에서 보여 주고 계속 편하게 갱신하기 위해 만든 개인 포트폴리오 페이지입니다. 공개 페이지, 디자인 시스템, 글 편집기와 관리자 CMS 까지 설계했습니다.cmseditornextjsTypeScript2026년 10월
- MacFolioTypeScript2026년 10월
- SproutFarm제한 시간 전까지 동물을 포획하는 탑다운 2D 픽셀 게임. Unity로 만들고 WebGL로 빌드해 웹에 배포했습니다. 20×20 타일맵 4장이 플레이어를 따라다니는 무한 맵, 청크 좌표 해시로 같은 지형 재생성, A* 경로 탐색으로 도망·추적하는 동물 AI, 서버리스 함수와 Redis로 상위 10위 랭킹2d-gamegameunityJavaScript2026년 10월
- QRUQRU는 “QR” + “Who Are You”를 결합한 말로, 사용자가 자신의 정보를 입력하여 QR 코드를 생성하고 이를 통해 디지털 명함을 공유할 수 있는 웹 애플리케이션입니다.TypeScript2026년 10월
Experience
- K-Digital Training - React·TypeScript·Node.js 기반의 웹 개발 및 API·DB·상태 관리·배포 등의 풀 사이클 개발 능력 학습 - Node.js, Express, TypeScript 학습 - React 기반의 프론트엔드 개발 학습 - SQL 데이터베이스 설계 및 쿼리 작성 - 프론트엔드와 백엔드 양쪽에서의 테스트 학습 실시 - AWS 기반의 배포 경험
KISA·본선(발표 평가) 진출
Skills
Frontend
가장 오래 다루었고, 가장 자신 있는 분야입니다. 이 포트폴리오 사이트를 포함해 거의 모든 프로젝트를 React + TypeScript 기반으로 제작했습니다.
React / Next.js
이 포트폴리오를 Next.js App Router 기반으로 처음부터 설계해서 제작했습니다. SSR과 동적 라우팅을 적용하고, next/image로 이미지 최적화도 직접 처리했습니다. 컴포넌트 구조를 분할하여 재사용 가능하도록 설계하는 것에 주력하고 있습니다.
TypeScript
모든 프로젝트에서 TypeScript를 사용합니다. 인터페이스로 데이터 구조를 정의하고, 제네릭이나 유니온 타입 같은 기능도 필요할 때 자연스럽게 활용합니다. 타입 덕분에 리팩토링 시 실수가 대폭 줄었습니다.
HTML / CSS
이 사이트의 모든 스타일을 CSS Modules로 직접 작성했습니다. CSS 커스텀 프로퍼티로 테마 시스템을 구성하고, clamp()와 미디어 쿼리를 조합하여 반응형 레이아웃을 설계했습니다.
Tailwind CSS
팀 프로젝트에서 Tailwind를 사용해봤습니다. 유틸리티 클래스 기반으로 빠르게 스타일링하는 방법에 익숙하며, 커스텀 설정도 다루었습니다.
Skills
Animation & Interaction
이 포트폴리오를 만들면서 본격적으로 깊게 빠진 분야입니다. 스크롤 한 번에 화면이 생생해지는 것이 즐거워서, 점점 복잡한 인터랙션에 도전하게 되었습니다.
GSAP / ScrollTrigger
이 사이트의 가로 스크롤 갤러리, 무한 루프 스크롤, 스크롤 기반의 등장 애니메이션을 모두 GSAP으로 구현했습니다. requestAnimationFrame 기반의 커스텀 스크롤 시스템도 직접 만들었으며, ScrollTrigger로 섹션별 애니메이션 타이밍을 세밀하게 제어합니다.
Framer Motion
페이지 전환 애니메이션, 마우스를 따라가는 패럴랙스 효과, 호버 시 반응하는 인터랙션 등에 활용합니다. useSpring과 useTransform의 조합으로 물리 기반의 자연스러운 동작을 구현합니다.
CSS Animations
keyframe 애니메이션과 transition을 상황에 맞게 설계합니다. 다크/라이트 테마 전환 효과나 로딩 애니메이션 등에 적용하며, CSS만으로 해결 가능한 것은 굳이 JS 라이브러리를 사용하지 않습니다.
Lottie / Three.js
Lottie로 디자이너가 제작한 애니메이션을 웹에 적용한 경험이 있습니다. Three.js는 아직 기초 단계이지만, 3D 웹 표현에 관심이 있어 계속 학습하고 있습니다.
Skills
Backend & Infra
프론트엔드가 주력이지만, 필요하면 API 서버도 직접 만듭니다. 풀스택으로 하나의 프로젝트를 처음부터 끝까지 혼자 운영할 수 있는 수준입니다.
Node.js / Express
Express로 REST API 서버를 구축한 경험이 있습니다. 라우트 분리, 미들웨어 설계, JWT 기반의 인증까지 직접 구현했으며, 에러 핸들링 구조도 구축했습니다.
PostgreSQL / MongoDB
PostgreSQL로 관계형 DB 스키마를 설계하고 쿼리를 작성해봤고, MongoDB로 비정형 데이터도 다루어봤습니다. ORM은 주로 Prisma를 사용합니다.
REST API / GraphQL
RESTful API를 설계해서 구현하는 것은 여러 번 해봤습니다. GraphQL은 클라이언트 쪽에서 Apollo Client로 데이터를 가져오는 방식으로 사용해봤습니다.
Vercel / Docker
이 포트폴리오를 Vercel에 배포해서 운영 중이며, 환경 변수 관리나 도메인 설정도 직접 하고 있습니다. Docker는 개발 환경 세팅이나 간단한 컨테이너 구성에 활용해봤습니다.
Skills
Design & Tools
디자이너는 아니지만, 간단한 안이나 프로토타입 정도는 직접 만들 수 있습니다. 기획에서 디자인, 개발까지 혼자 진행하는 것을 좋아합니다.
Figma
와이어프레임과 프로토타입을 직접 만듭니다. 이 포트폴리오의 초안도 Figma에서 작성했으며, 컴포넌트 시스템과 오토레이아웃도 활용하고 있습니다.
UI/UX Design
사용자 흐름을 먼저 그린 후 반응형 레이아웃을 직접 기획합니다. 디자인으로 끝나지 않고 코드로 구현하는 것까지 연결되는 것이 제 방식입니다.
Webflow / No-Code
코드 없이 빠르게 랜딩페이지를 만들어야 할 때는 Webflow를 활용합니다. 간단한 마케팅 페이지나 프로토타입용으로 사용해봤습니다.
Git / VS Code
Git에서 브랜치 전략을 세우고 PR 기반의 워크플로우를 사용하고 있습니다. VS Code에서는 단축키와 확장 기능을 적극 활용하여 작업 속도를 높이고 있습니다.
Principles
Just Build It
생각하기만 해서는 끝내지 않으므로, 먼저 만들어보고 수정합니다.
Readable Code
나중에 다시 봤을 때 이해할 수 있는 코드를 작성하도록 하고 있습니다.
Keep Learning
모르는 것은 당연하며, 찾아서 해결하는 것이 실력이라고 생각합니다.
Workflow
Research
무엇을 만들 것인지, 어떤 구조가 올바른지 먼저 탐색합니다.
Prototype
간단한 안이나 프로토타입을 먼저 만듭니다.
Build
코드를 작성하면서 작동하지 않는 부분은 즉시 수정합니다.
Improve
완성 후에도 사용하면서 불편한 부분을 지속적으로 수정합니다.
Certifications & Awards
Certifications
TOEIC 775
ETS정보처리기사
한국산업인력공단Awards
2022년 졸업 프로젝트 평가회
서울여자대학교 정보보호학과2023년 프로보노 공모전 동상
한국정보방송통신대연합Designed & Developed with ❤ by HYEON
Design System