PM Development Instinct

1주차: Next.js 기본 & 감정 일기장 디자인

⏱️ 120분
🎨 디자인 목업

Next.js 기본 개념을 학습하고, 감정 일기장의 UI 목업을 제작하여 디자인 시스템과 컴포넌트 구조를 설계해봅니다.

← Introduction📚 Course Curriculum다음 코스 → 2주차: GitHub & Firebase 배포

🎯 학습 목표

💡 개념 이해

  • • Next.js 기본 개념과 장점을 이해해요
  • • React 컴포넌트 구조를 파악해요
  • • 파일 기반 라우팅 시스템을 이해해요

🎨 UI/UX 디자인

  • • 감정 일기장 디자인 시스템을 구축해요
  • • 사용자 경험 중심의 인터페이스를 설계해요
  • • 모바일 우선 반응형 디자인을 적용해요

🔧 프로토타이핑

  • • 정적 페이지로 목업을 구현해요
  • • 감정 입력 폼 인터페이스를 설계해요
  • • 일기 목록 및 상세 뷰 레이아웃을 만들어요

📖 시작하기 전에 알아야 할 기본 개념들

개발 용어들이 생소하시죠? 차근차근 설명해드릴게요! 🤗

🟦 Node.js란?

웹 브라우저 밖에서도 JavaScript를 실행할 수 있게 해주는 프로그램입니다.

🔍 쉽게 말하면: 컴퓨터에서 JavaScript로 프로그램을 만들 수 있게 해주는 도구예요

📦 npm이란?

다른 개발자들이 만든 코드(패키지)를 내려받고 관리하는 도구입니다.

🔍 쉽게 말하면: 앱스토어처럼 필요한 코드를 검색해서 설치할 수 있는 도구예요

⚡ Next.js란?

웹사이트를 쉽고 빠르게 만들 수 있게 도와주는 React 기반 프레임워크입니다.

🔍 쉽게 말하면: 웹사이트 만들기를 도와주는 도구 모음집이에요

🔧 npx란?

npm 패키지를 설치하지 않고도 바로 실행할 수 있게 해주는 도구입니다.

🔍 쉽게 말하면: 프로그램을 컴퓨터에 설치하지 않고도 한 번만 실행할 수 있는 도구예요

⚛️ React.js란?

웹사이트의 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리입니다.

🔍 쉽게 말하면: 웹사이트의 버튼, 폼, 페이지 등을 만들기 위한 도구 모음이에요

📝 TypeScript란?

JavaScript에 타입 검사 기능을 추가한 언어예요. 코드 실수를 미리 찾아주죠.

🔍 쉽게 말하면: 맞춤법 검사기처럼 코드 오타를 미리 잡아주는 도구예요

🔍 ESLint란?

코드 스타일과 문법 오류를 자동으로 검사해주는 도구예요.

🔍 쉽게 말하면: 문서 작성할 때 문법 검사해주는 도구 같은 거예요

🤖 AI 시대에는 TypeScript와 ESLint가 필요 없어요!

⚡ AI가 실시간으로 코드를 검사해요

Cursor나 GitHub Copilot 같은 AI 도구들이 코드를 작성하는 동시에 오류를 찾아주고 수정 방법까지 제안해줘요.

🚀 빠른 프로토타이핑에 집중

PM은 아이디어를 빠르게 시각화하는 게 중요해요. 복잡한 설정보다는 기능 구현에 집중하는 게 효율적이죠!

💡 학습 곡선 최소화

JavaScript만 알면 바로 시작할 수 있어요. 추가 설정이나 복잡한 타입 정의 없이도 충분히 멋진 앱을 만들 수 있답니다.

💡 한 번에 정리하면...

Node.js를 설치하면 npm도 자동으로 함께 설치되고, npm으로 React.js와Next.js를 사용해서 멋진 웹사이트를 만들 수 있어요! AI가 있으니까 TypeScript나 ESLint 걱정은 안 해도 돼요! 🎉

🤔 React.js vs Next.js: 뭐가 다른 걸까요?

PM이 알아야 할 핵심 차이점들을 쉽게 설명해드릴게요! 📊

⚛️ React.js (라이브러리)

🎯 주요 특징

  • UI 컴포넌트만 만드는 도구
  • 개발자가 직접 설정할 게 많음
  • 브라우저에서만 실행 (CSR)

🏠 비유: 집을 짓기 위한 기본 도구들이 담긴 도구상자

⚡ Next.js (프레임워크)

🎯 주요 특징

  • React.js + 추가 기능들이 모두 포함
  • 많은 것들이 미리 설정되어 있음
  • 서버에서도 실행 가능 (SSR)

🏠 비유: 미리 완성된 집 설계도면과 전문 건축팀까지 포함

🚀 SSR(Server Side Rendering)이 왜 중요할까요?

💨 성능 향상

사용자가 페이지를 더 빠르게 볼 수 있어요. 서버에서 미리 HTML을 만들어서 보내주거든요.

🔍 SEO 최적화

구글 같은 검색엔진이 웹사이트 내용을 더 잘 찾을 수 있어요. 비즈니스에 매우 중요한 부분이죠!

📱 모바일 최적화

인터넷이 느린 환경에서도 빠르게 로딩돼요. 모바일 사용자 경험이 훨씬 좋아집니다.

📋 PM 관점에서 정리하면

🎯 프로젝트 목표:
빠른 프로토타입 → React.js
실제 서비스 → Next.js

⏰ 개발 속도:
Next.js가 더 빠름
(미리 설정된 기능들)

💰 비용 효율:
Next.js가 장기적으로
더 경제적

← Introduction📚 Course Curriculum다음 코스 → 2주차: GitHub & Firebase 배포

🤖 Cursor Agent 실습 가이드

AI Agent를 활용하여 Next.js 일기장 앱을 빠르게 스캐폴딩해보세요!

📋 단계별 실습 과정

Step 1: Cursor Agent 실행
  1. Cursor IDE를 실행해요
  2. Cmd + I (Mac) 또는 Ctrl + I (Windows)를 눌러 Agent Chat을 열어요
  3. 새 폴더를 만들거나 기존 빈 폴더에서 시작해요
Step 2: 정확한 명령어 입력

다음 명령어를 복사해서 입력하세요:

next.js로 일기를 쓰면 AI가 공감해 주는 앱의 mock up design을 만들어 줘
💡 Tip:Agent가 질문을 할 수 있습니다. 구체적인 디자인 방향성이나 기능에 대해 답변해주세요!
Step 3: 결과 확인 및 실행
  1. Agent가 생성한 파일들을 확인해요
  2. 터미널에서 npm install 실행해요
    💡 필요한 라이브러리들을 자동으로 다운로드하는 명령어예요
  3. npm run dev 로 개발 서버를 실행해요
    💡 웹사이트를 미리보기할 수 있는 서버를 켜는 명령어예요
  4. 브라우저에서 http://localhost:3000 접속해요
    💡 내 컴퓨터에서만 볼 수 있는 웹사이트 주소예요 (포트 3000번 사용)

✨ 기대 결과

  • • 완전히 동작하는 Next.js 앱 구조를 얻을 수 있어요
  • • 감정 일기장의 기본 UI 컴포넌트들을 만들 수 있어요
  • • 모바일 반응형 디자인을 적용할 수 있어요
  • • 기본적인 라우팅 설정을 할 수 있어요

🎨 Agent와의 대화: 디자인 스타일 선택하기

Agent가 디자인 스타일을 물어보면 아래 중에서 선택해주세요!

🎨 미니멀 모던: "페이지를 미니멀하고 모던한 디자인으로 변경해주세요. 흰색(#ffffff) 배경 위주, Inter나 SF Pro 폰트 스타일, 미묘한 그림자(box-shadow: 0 1px 3px rgba(0,0,0,0.1)), 하나의 포인트 컬러(#2563eb), 넉넉한 여백(padding: 2rem 이상)과 정렬을 사용하세요."
🌟 네온 사이버펑크: "페이지를 사이버펑크/네온 스타일로 변경해주세요. 어두운 배경(#0a0a0a, #1a1a2e), 네온 컬러(cyan #00ffff, magenta #ff00ff, lime green #00ff00), 글로우 효과(text-shadow, box-shadow with glow), 미래적인 폰트(Orbitron, Exo), 그라데이션 배경과 반짝이는 애니메이션을 적용하세요."
🔥 웜 브루탈리즘: "페이지를 웜 브루탈리즘 스타일로 변경해주세요. 따뜻한 색상 팔레트(주황 #ff6b35, 노랑 #f7931e, 빨강 #c5282f), 굵고 임팩트 있는 타이포그래피(font-weight: 900), 불규칙한 레이아웃과 겹치는 요소들(transform: rotate, z-index 활용), 거친 텍스처와 강한 대비, 실험적인 배치를 사용하세요."
📚 클래식 아카데믹: "페이지를 클래식한 아카데믹 스타일로 변경해주세요. 크림색/베이지 배경(#fef7ed, #f5f5dc), 세리프 폰트(Georgia, 'Times New Roman', serif), 종이 텍스처 느낌(subtle background patterns), 고급스러운 컬러(navy #1e3a8a, burgundy #7c2d12, gold #d97706), 전통적인 레이아웃과 균형잡힌 여백을 사용하세요."
💎 글래스모피즘: "페이지를 글래스모피즘 스타일로 변경해주세요. 반투명 유리 효과(background: rgba(255,255,255,0.25)), 블러 배경(backdrop-filter: blur(10px)), 부드러운 그라데이션 배경, 미묘한 그림자(box-shadow: 0 8px 32px rgba(31,38,135,0.37))와 하이라이트, 플로팅 카드 레이아웃을 적용하세요."
🌈 레트로 80년대: "페이지를 80년대 레트로 스타일로 변경해주세요. 핑크/퍼플/블루 그라데이션(linear-gradient(45deg, #ff006e, #8338ec, #3a86ff)), 네온 그리드 패턴 배경, 레트로웨이브 색상 조합, 굵은 아웃라인(border: 3px solid)과 드롭 섀도우, 빈티지 타이포그래피(font-family: 'Courier New')를 사용하세요."
🌿 내추럴 어스톤: "페이지를 자연스럽고 친환경적인 어스톤 스타일로 변경해주세요. 자연 색상(forest green #228b22, earth brown #8b4513, cream beige #f5f5dc, sage #9caf88), 유기적인 모양과 둥근 모서리(border-radius: 20px 이상), 자연 텍스처 힌트, 부드러운 그라데이션, 편안하고 따뜻한 느낌의 레이아웃을 사용하세요."
⚡ 하이테크 기업: "페이지를 하이테크 기업 스타일로 변경해주세요. 어두운 배경(#0f172a) + 밝은 accent 색상(#06b6d4), 기하학적 패턴과 선형 요소, 슬릭하고 프로페셔널한 느낌, 메탈릭 텍스처 힌트(linear-gradient with metallic colors), 정교한 애니메이션(transform transitions)과 호버 효과를 적용하세요."
📰 페이퍼 매거진: "페이지를 잡지 스타일로 변경해주세요. 다단 레이아웃(CSS Grid with multiple columns), 크고 임팩트 있는 헤드라인(font-size: 3rem 이상), 다양한 타이포그래피 크기와 위계, 컬러풀한 하이라이트 박스(background: bright colors), 신문/잡지 같은 높은 정보 밀도와 시각적 구성을 만들어주세요."
🌸 소프트 파스텔: "페이지를 소프트 파스텔 스타일로 변경해주세요. 부드러운 파스텔 색상 팔레트(lavender #e6e6fa, mint #f0fff0, peach #ffe5cc, sky blue #e0f6ff), 구름 같은 부드러운 모양(border-radius: 50px, organic shapes), 낮은 대비와 부드러운 그림자(box-shadow: 0 4px 20px rgba(0,0,0,0.1)), 둥근 모서리와 플로팅 요소들, 꿈꾸는 듯한 분위기를 연출하세요."

💡 추가 질문과 답변 예시

Q: 주요 기능은?
A: "일기 작성, 감정 선택, AI 공감 메시지, 일기 목록"
Q: 타겟 사용자는?
A: "20-30대 직장인, 감정을 정리하고 싶은 사람들"

⚠️ 자주 발생하는 에러와 해결법

🔴 "use client" 관련 에러
문제: onClick, useState 등을 사용할 때 발생
💡 Next.js 13+ App Router에서는 기본적으로 모든 컴포넌트가 서버 사이드에서 렌더링됩니다. 브라우저 전용 기능(클릭 이벤트, 상태 관리 등)을 사용하려면 "use client" 지시어가 필요해요.
해결: "인터랙티브한 기능(버튼 클릭, 상태 관리)이 필요한 부분은 별도의 클라이언트 컴포넌트로 분리해서 만들어 주세요"라고 요청
🟠 패키지 설치 에러
문제: npm install 시 의존성 충돌 발생
해결: npm install --legacy-peer-deps 또는 npm install --force 시도
💡 --legacy-peer-deps: npm 버전 7+ 이전의 의존성 해결 방식을 사용해요 (더 안전)
💡 --force: 충돌하는 의존성을 강제로 무시하고 설치해요 (주의 필요)
🟡 포트 충돌 에러
문제: "Port 3000 is already in use" 메시지
해결: 터미널에서 lsof -ti:3000 | xargs kill -9 실행 후 재시작
💡 lsof -ti:3000: 포트 3000을 사용하는 프로세스 ID를 찾아요
💡 xargs kill -9: 찾은 프로세스를 강제로 종료해요 (-9는 강제 종료 신호)
🔵 이미지/파일 경로 에러
문제: 이미지가 표시되지 않거나 404 에러
해결: 모든 이미지는 public 폴더에 넣고 /이미지명.jpg로 참조
💡 문제 해결 팁
  • • 에러 메시지를 정확히 복사해서 Agent에게 알려 주세요
  • • 터미널의 전체 에러 로그를 공유하면 더 정확한 해결책을 받을 수 있어요
  • • 프로젝트 폴더를 완전히 삭제하고 다시 생성하는 것도 하나의 방법이에요

🚀 실습 가이드 (따라하기)

📱 감정 일기장 UI 목업 제작

감정 일기장의 전체 사용자 경험을 설계하고, 정적 페이지로 모든 화면을 구현하여 완성도 높은 디자인 목업을 제작해요.

🎨 화면 설계

  • • 메인 대시보드 화면
  • • 일기 작성 폼
  • • 감정 선택 인터페이스

📊 데이터 구조

  • • 감정 카테고리 정의
  • • 일기 데이터 모델 설계
  • • 목업 데이터 생성

🎭 감정 시각화

  • • 감정 아이콘 & 색상 시스템
  • • 감정 트렌드 차트 목업
  • • 직관적인 감정 표현

📚 제공 자료

🚀 Next.js 기본 템플릿

개인 홈페이지 제작을 위한 기본 구조가 준비된 Next.js 템플릿을 제공합니다.

  • • 기본 페이지 구조 및 라우팅
  • • 재사용 가능한 컴포넌트
  • • 기본 스타일링 설정
  • • 반응형 레이아웃 기본틀

🎨 감정 일기장 디자인 시스템

감정 일기장 전용 디자인 시스템과 UI 컴포넌트 라이브러리를 제공합니다.

  • • 감정별 색상 팔레트
  • • 감정 아이콘 라이브러리
  • • 타이포그래피 시스템
  • • 반응형 레이아웃 그리드

📊 목업 데이터 & 시나리오

실제 사용자 시나리오를 바탕으로 한 목업 데이터와 사용자 스토리를 제공합니다.

  • • 샘플 일기 데이터
  • • 사용자 페르소나 및 여정
  • • 감정 상태 시나리오
  • • 인터랙션 플로우 가이드