# ๐Ÿค– ์Ÿ์Šน๋ฉ”์ด๋“œ - RPA ์ž๋™ํ™” & ๋น„์ฆˆ๋‹ˆ์Šค ์†”๋ฃจ์…˜ ๋Œ€๊ธฐ์—… ์ถœ์‹  ๊ฐœ๋ฐœ์ž๊ฐ€ ์ œ๊ณตํ•˜๋Š” ์ „๋ฌธ ๋น„์ฆˆ๋‹ˆ์Šค ์†”๋ฃจ์…˜ ํฌํŠธํด๋ฆฌ์˜ค ์›น์‚ฌ์ดํŠธ ## ๐Ÿ“Œ ํ”„๋กœ์ ํŠธ ์†Œ๊ฐœ **์Ÿ์Šน๋ฉ”์ด๋“œ**๋Š” RPA ์ž๋™ํ™”, ์›น ๊ฐœ๋ฐœ, ์•ฑ ๊ฐœ๋ฐœ ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•˜๋Š” ๋น„์ฆˆ๋‹ˆ์Šค ์†”๋ฃจ์…˜ ํฌํŠธํด๋ฆฌ์˜ค ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค. ์™ธ์ฃผ ๊ฐœ๋ฐœ ์„œ๋น„์Šค๋ฅผ ์†Œ๊ฐœํ•˜๊ณ  ํ”„๋กœ์ ํŠธ๋ฅผ ์ „์‹œํ•˜์—ฌ ๊ณ ๊ฐ์„ ์œ ์น˜ํ•˜๊ธฐ ์œ„ํ•œ ์ „๋ฌธ์ ์ธ ๋žœ๋”ฉ ํŽ˜์ด์ง€์ž…๋‹ˆ๋‹ค. ### โœจ ์ฃผ์š” ๊ธฐ๋Šฅ - ๐ŸŽจ ํ˜„๋Œ€์ ์ด๊ณ  ํ”„๋กœํŽ˜์…”๋„ํ•œ ๋””์ž์ธ - ๐Ÿ“ฑ ์™„๋ฒฝํ•œ ๋ฐ˜์‘ํ˜• (๋ชจ๋ฐ”์ผ/ํƒœ๋ธ”๋ฆฟ/๋ฐ์Šคํฌํ†ฑ) - โšก Next.js 14 + TypeScript๋กœ ๋น ๋ฅธ ์„ฑ๋Šฅ - ๐ŸŽฏ RPA ์ž๋™ํ™” ์„œ๋น„์Šค ๊ฐ•์กฐ - ๐Ÿ’ผ ์„œ๋น„์Šค ์นดํƒˆ๋กœ๊ทธ (๊ธˆ์•ก๋ณ„ ๋ถ„๋ฅ˜) - ๐Ÿ–ผ๏ธ ํ”„๋กœ์ ํŠธ ํฌํŠธํด๋ฆฌ์˜ค ์„น์…˜ - ๐Ÿ“ฌ ๋ฌธ์˜ ํผ ## ๐Ÿ›  ๊ธฐ์ˆ  ์Šคํƒ - **Framework**: Next.js 14 (App Router) - **Language**: TypeScript - **Styling**: Tailwind CSS - **Deployment**: Vercel (๊ถŒ์žฅ) ## ๐Ÿš€ ์‹œ์ž‘ํ•˜๊ธฐ ### 1. ๊ฐœ๋ฐœ ์„œ๋ฒ„ ์‹คํ–‰ ```bash # ์˜์กด์„ฑ ์„ค์น˜ npm install # ๊ฐœ๋ฐœ ์„œ๋ฒ„ ์‹œ์ž‘ npm run dev ``` ๋ธŒ๋ผ์šฐ์ €์—์„œ [http://localhost:3000](http://localhost:3000)์„ ์—ด์–ด ํ™•์ธํ•˜์„ธ์š”. ### 2. ํ”„๋กœ๋•์…˜ ๋นŒ๋“œ ```bash # ๋นŒ๋“œ npm run build # ํ”„๋กœ๋•์…˜ ์„œ๋ฒ„ ์‹คํ–‰ npm start ``` ## ๐Ÿ“ฆ ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ ``` jaengseung-made/ โ”œโ”€โ”€ app/ โ”‚ โ”œโ”€โ”€ page.tsx # ๋ฉ”์ธ ๋žœ๋”ฉ ํŽ˜์ด์ง€ โ”‚ โ”œโ”€โ”€ layout.tsx # ๋ฃจํŠธ ๋ ˆ์ด์•„์›ƒ โ”‚ โ””โ”€โ”€ globals.css # ๊ธ€๋กœ๋ฒŒ ์Šคํƒ€์ผ โ”œโ”€โ”€ public/ # ์ •์  ํŒŒ์ผ โ””โ”€โ”€ package.json ``` ## ๐ŸŒ ๋ฐฐํฌ ๊ฐ€์ด๋“œ ### ์˜ต์…˜ 1: Vercel ๋ฐฐํฌ (์ถ”์ฒœ - ๋ฌด๋ฃŒ) 1. [Vercel](https://vercel.com) ๊ณ„์ • ์ƒ์„ฑ 2. GitHub์— ํ”„๋กœ์ ํŠธ ํ‘ธ์‹œ 3. Vercel์—์„œ "Import Project" ํด๋ฆญ 4. ์ €์žฅ์†Œ ์„ ํƒํ•˜๊ณ  ๋ฐฐํฌ 5. ์ž๋™์œผ๋กœ HTTPS, CDN ์ œ๊ณต **์žฅ์ **: ๋ฌด๋ฃŒ, ์ž๋™ ๋ฐฐํฌ, ๊ธ€๋กœ๋ฒŒ CDN, HTTPS ### ์˜ต์…˜ 2: Netlify ๋ฐฐํฌ (๋ฌด๋ฃŒ) 1. [Netlify](https://netlify.com) ๊ณ„์ • ์ƒ์„ฑ 2. "Add new site" โ†’ "Import from Git" 3. ๋นŒ๋“œ ์„ค์ •: - Build command: `npm run build` - Publish directory: `.next` 4. ๋ฐฐํฌ ### ์˜ต์…˜ 3: Synology NAS ๋ฐฐํฌ 1. Docker ์„ค์น˜ (Synology Docker ํŒจํ‚ค์ง€) 2. Dockerfile ์ƒ์„ฑ: ```dockerfile FROM node:18-alpine WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npm run build EXPOSE 3000 CMD ["npm", "start"] ``` 3. ์ด๋ฏธ์ง€ ๋นŒ๋“œ ๋ฐ ์‹คํ–‰ 4. ํฌํŠธ ํฌ์›Œ๋”ฉ ์„ค์ • (80 โ†’ 3000) **์ฃผ์˜**: NAS๋Š” ์†๋„/์•ˆ์ •์„ฑ์ด ํด๋ผ์šฐ๋“œ๋ณด๋‹ค ๋‚ฎ์„ ์ˆ˜ ์žˆ์Œ ## ๐Ÿ”ง ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ### ์—ฐ๋ฝ์ฒ˜ ์ •๋ณด ์ˆ˜์ • `app/page.tsx` ํŒŒ์ผ์—์„œ ๋‹ค์Œ ์ •๋ณด๋ฅผ ์ˆ˜์ •ํ•˜์„ธ์š”: ```tsx // ์ด๋ฉ”์ผ contact@jaengseung.com โ†’ ์‹ค์ œ ์ด๋ฉ”์ผ // ์ „ํ™”๋ฒˆํ˜ธ 010-0000-0000 โ†’ ์‹ค์ œ ์ „ํ™”๋ฒˆํ˜ธ ``` ### ์„œ๋น„์Šค ๊ฐ€๊ฒฉ ์ˆ˜์ • `app/page.tsx`์˜ Services Section์—์„œ ๊ฐ€๊ฒฉ ์ˆ˜์ •: ```tsx
50๋งŒ์›~
``` ### ํฌํŠธํด๋ฆฌ์˜ค ์ถ”๊ฐ€ `app/page.tsx`์˜ Portfolio Section์— ํ”„๋กœ์ ํŠธ ์นด๋“œ ์ถ”๊ฐ€ ## ๐Ÿ“‹ ๋‹ค์Œ ๋‹จ๊ณ„ 1. **๋„๋ฉ”์ธ ๊ตฌ๋งค** - Cloudflare (์—ฐ $10~15) - GoDaddy - Gabia (ํ•œ๊ตญ) 2. **๋„๋ฉ”์ธ ์—ฐ๊ฒฐ** - Vercel: Dashboard์—์„œ "Add Domain" - DNS ์„ค์ •: A ๋ ˆ์ฝ”๋“œ ๋˜๋Š” CNAME 3. **ํ”Œ๋žซํผ ๋“ฑ๋ก** - [ํฌ๋ชฝ](https://kmong.com) - ์„œ๋น„์Šค ๋“ฑ๋ก - [์ˆจ๊ณ ](https://soomgo.com) - ํ”„๋กœํ•„ ์ƒ์„ฑ - ํฌํŠธํด๋ฆฌ์˜ค URL ์ฒจ๋ถ€ 4. **SEO ์ตœ์ ํ™”** - Google Search Console ๋“ฑ๋ก - ์‚ฌ์ดํŠธ๋งต ์ œ์ถœ - ๋ฉ”ํƒ€ ํƒœ๊ทธ ์ตœ์ ํ™” (์ด๋ฏธ ์ ์šฉ๋จ) 5. **์‹ค์ œ ํ”„๋กœ์ ํŠธ ์ถ”๊ฐ€** - ์ƒ˜ํ”Œ RPA ํ”„๋กœ์ ํŠธ ๊ฐœ๋ฐœ - GitHub์— Public Repository ์ƒ์„ฑ - ํฌํŠธํด๋ฆฌ์˜ค ์„น์…˜์— ๋งํฌ ์ถ”๊ฐ€ ## ๐Ÿ’ก ์ถ”๊ฐ€ ๊ธฐ๋Šฅ ์•„์ด๋””์–ด - [ ] ๋ฌธ์˜ ํผ ๋ฐฑ์—”๋“œ ์—ฐ๋™ (Formspree, Netlify Forms) - [ ] Google Analytics ์ถ”๊ฐ€ - [ ] ๋ธ”๋กœ๊ทธ ์„น์…˜ (๊ธฐ์ˆ  ๊ธ€ ์ž‘์„ฑ) - [ ] ๊ณ ๊ฐ ํ›„๊ธฐ ์„น์…˜ - [ ] ๋‹คํฌ ๋ชจ๋“œ - [ ] ๋‹ค๊ตญ์–ด ์ง€์› (์˜์–ด) - [ ] ์ฑ—๋ด‡ ์œ„์ ฏ (์นด์นด์˜คํ†ก ์ฑ„๋„) ## ๐Ÿ“ž ๋ฌธ์˜ ํ”„๋กœ์ ํŠธ ๊ด€๋ จ ๋ฌธ์˜: bgg8988@gmail.com --- **์Ÿ์Šน๋ฉ”์ด๋“œ** - ๋น„์ฆˆ๋‹ˆ์Šค ์„ฑ์žฅ์„ ์œ„ํ•œ ์ „๋ฌธ ๊ฐœ๋ฐœ ์†”๋ฃจ์…˜