Crafting Digital
Experiences
프론트엔드 중심 풀스택 개발자. 직접 만들어보면서 배우는 걸 좋아합니다.
about me몽이
이 마을에 사는 작은 토끼이 마을에 사는 꿈을 닮은 작은 토끼, 몽(夢)이를 소개할게요. 이름에는 밤에 꾸는 꿈도, 낮에 품는 꿈도 모두 담겨 있어요.
사소한 것도 놓치지 않는 커다란 눈망울, 사람들의 목소리에 귀 기울이는 쫑긋한 귀가 자랑이랍니다.
호기심이 많아 새로운 것에 쉽게 반응하지만, 살짝 겁이 많아서 갑자기 다가가면 깜짝 놀라요.
Profile
만드는 게 좋아서 개발을 시작했습니다.
대학에서 컴퓨터공학을 전공하면서 웹 개발에 관심을 갖게 됐고, 프론트엔드부터 백엔드까지 직접 만져보면서 공부했습니다. 특히 화면에 바로 결과가 보이는 프론트엔드 쪽이 잘 맞았습니다.
이 포트폴리오도 직접 기획부터 개발까지 했고, 그 과정에서 GSAP, Framer Motion 같은 애니메이션 라이브러리도 익혔습니다. 모르는 건 부딪혀보면서 배우는 편입니다.
GitHub
@hyeoniverse- 공개 저장소
- 0
- 받은 스타
- 0
- 팔로워
- 0
- 함께한 햇수
- 0년
- 최근 활동
- 2026년 10월
- TypeScript38%
- JavaScript25%
- CSS13%
- HTML13%
- Python13%
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 프로보노 공모전 동상
한국정보방송통신대연합Crafting Digital
Experiences
프론트엔드 중심 풀스택 개발자. 직접 만들어보면서 배우는 걸 좋아합니다.
about me몽이
이 마을에 사는 작은 토끼이 마을에 사는 꿈을 닮은 작은 토끼, 몽(夢)이를 소개할게요. 이름에는 밤에 꾸는 꿈도, 낮에 품는 꿈도 모두 담겨 있어요.
사소한 것도 놓치지 않는 커다란 눈망울, 사람들의 목소리에 귀 기울이는 쫑긋한 귀가 자랑이랍니다.
호기심이 많아 새로운 것에 쉽게 반응하지만, 살짝 겁이 많아서 갑자기 다가가면 깜짝 놀라요.
Profile
만드는 게 좋아서 개발을 시작했습니다.
대학에서 컴퓨터공학을 전공하면서 웹 개발에 관심을 갖게 됐고, 프론트엔드부터 백엔드까지 직접 만져보면서 공부했습니다. 특히 화면에 바로 결과가 보이는 프론트엔드 쪽이 잘 맞았습니다.
이 포트폴리오도 직접 기획부터 개발까지 했고, 그 과정에서 GSAP, Framer Motion 같은 애니메이션 라이브러리도 익혔습니다. 모르는 건 부딪혀보면서 배우는 편입니다.
GitHub
@hyeoniverse- 공개 저장소
- 0
- 받은 스타
- 0
- 팔로워
- 0
- 함께한 햇수
- 0년
- 최근 활동
- 2026년 10월
- TypeScript38%
- JavaScript25%
- CSS13%
- HTML13%
- Python13%
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 프로보노 공모전 동상
한국정보방송통신대연합Crafting Digital
Experiences
프론트엔드 중심 풀스택 개발자. 직접 만들어보면서 배우는 걸 좋아합니다.
about me몽이
이 마을에 사는 작은 토끼이 마을에 사는 꿈을 닮은 작은 토끼, 몽(夢)이를 소개할게요. 이름에는 밤에 꾸는 꿈도, 낮에 품는 꿈도 모두 담겨 있어요.
사소한 것도 놓치지 않는 커다란 눈망울, 사람들의 목소리에 귀 기울이는 쫑긋한 귀가 자랑이랍니다.
호기심이 많아 새로운 것에 쉽게 반응하지만, 살짝 겁이 많아서 갑자기 다가가면 깜짝 놀라요.
Profile
만드는 게 좋아서 개발을 시작했습니다.
대학에서 컴퓨터공학을 전공하면서 웹 개발에 관심을 갖게 됐고, 프론트엔드부터 백엔드까지 직접 만져보면서 공부했습니다. 특히 화면에 바로 결과가 보이는 프론트엔드 쪽이 잘 맞았습니다.
이 포트폴리오도 직접 기획부터 개발까지 했고, 그 과정에서 GSAP, Framer Motion 같은 애니메이션 라이브러리도 익혔습니다. 모르는 건 부딪혀보면서 배우는 편입니다.
GitHub
@hyeoniverse- 공개 저장소
- 0
- 받은 스타
- 0
- 팔로워
- 0
- 함께한 햇수
- 0년
- 최근 활동
- 2026년 10월
- TypeScript38%
- JavaScript25%
- CSS13%
- HTML13%
- Python13%
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
완성 후에도 써보면서 불편한 부분을 계속 고칩니다.