AI를 활용해 1시간만에 간단 뉴스 서비스 만들기 (feat. Claude, GPT)

Raina·2025년 2월 15일

projects

목록 보기

3/3

안녕하세요 🤓 주니어 개발자 Raina입니다.
정말 AI 기능이 날이면 날마다 발전하고 5차 산업혁명이 온다고 하는게 저는 개발을 하면서 크게 느껴집니다.
매일 개발을 하며 AI를 활용하는데 대답이 날로 발전한다고 느낍니다.
최근 Generative AI 2025 코칭 스터디에 참여 하면서 프롬프트 엔지니어링과 AI 활용을 더 잘할 수 있는 방법도 배우고 있는데 1주차 과제가 AI의 미래에 대해 질문하는 것이었습니다.
저는 개발자의 미래도 궁금해 이에 대해 물어봤는데 2030년쯤이면 중급 개발자 정도는 사라질 수 있다고 대답하더라구여
물론 그 다음 살아남으려면 어떻게 해야할지 물어봤지만, AI를 활용하지 못하고 그 이상의 가치를 제공하지 못하는 개발자는 거의 대체될 것은 명확해 보입니다.

👀 왜 뉴스 서비스?

굉장히 간단한 서비스이지만, 저는 집에서 TV를 전혀 보지 않습니다. 아예 연결을 안합니다.
평소에 유튜브나 넷플릭스를 많이 보는데 이는 제가 보는 알고리즘 정도로 추천해주지 세상의 중요한 뉴스를 전해주지는 않습니다.

최근 정말 큰 일인 계엄이 선포되었을 때도, 국가 재난 문자 등이 오지도 않고 저에게 소식이 닿지 않아 모르고 있었습니다.
밤에 유튜브를 내리다가 제가 구독하는 유명한 변호사님이 "변호사가 설명해주는 계엄령"이라는 영상 썸네일을 봤는데 우리나라에 계엄이 선포되었다는 건 꿈에도 몰랐기 때문에 "왜 갑자기 이런거 설명하지?"라고 생각하고 클릭하지 않고 넘어갔습니다. (이후 회사 동료들에 의해 알게되었습니다.)
어쩄든 정치적인 얘기는 제외하고 제가 아무리 TV를 안봐도 가끔 뉴스를 찾아보며 중요한 뉴스는 알고 있어야 겠다고 느꼈습니다.
하지만 네이버 메인 뉴스는 마음에 안드는 컨텐츠들이 많았고, "정말 간단하게 중요한 헤드라인만 샥 훑고 가기 + 개발 관련 뉴스를 동시에 보고 싶은 니즈"가 있었습니다. 그래서 제가 평소에 알고 있던 Open API인 News API + Hacker News API를 이용해 각 주요 뉴스를 20개만 가져오는 간단 PWA 앱을 만들었습니다.

그럼 만드는 과정을 살펴볼까요?
정말 간단해 보이지만, 똑똑하게 질문하는 법이 시간을 많이 줄여줄 수 있습니다.

🧠 기획 과정

First Things First! 자, 첫번째로 기획을 해야 서비스를 만들겠죠?
참고로 제가 사용한 AI 환경은 다음과 같습니다.

환경
저는 현재 개발자로 개발시 AI를 많이 활용하기 때문에 GPT, Claud를 유료 결제해 사용합니다.
(유료 결제가 아니신 분도 이렇게 간단한 프로젝트 정도는 중간에 필요없는 질문으로 낭비하지 않는다면 무료로도 가능할 것 같습니다.)
코드 에디터 -> Cursor 사용 (무료 버전 사용, 해당 플젝에 AI 기능 사용 x)

GPT를 활용해보겠습니다.

Q. NewsAPI , Hacker News API를 이용해 하루 한 번 들어가 주요 뉴스를 살펴보는 웹페이지 혹은 구글 확장 프로그램을 만들거야
기획, 설계 도와줘

하루 한 번 주요 뉴스를 살펴볼 수 있는 웹페이지 혹은 구글 확장 프로그램을 만들기 위한 기획과 설계를 도와드리겠습니다. 이 프로젝트는 NewsAPI와 Hacker News API를 활용하여 최신 뉴스를 사용자에게 제공하는 웹페이지나 확장 프로그램입니다.

기획
주요 기능:

뉴스 카테고리:
- 한국 뉴스
- 개발 관련 뉴스 (Hacker News 포함)
- 기타 주요 글로벌 뉴스
- 자동화된 뉴스 제공:
- 하루에 한 번 자동으로 주요 뉴스를 불러옵니다.
- 사용자가 페이지를 열면 최신 뉴스가 바로 표시됩니다.
검색 기능:
- 사용자가 뉴스 카테고리나 키워드를 검색하여 필터링할 수 있습니다.
알림 기능 (옵션):
- 새로운 주요 뉴스가 있을 때 알림을 제공하여 사용자가 놓치지 않도록 합니다.

페이지/구글 확장 프로그램 구조:

헤더:
사이트 로고, 카테고리 선택 (한국 뉴스, 개발 뉴스 등), 검색창
메인 콘텐츠:
- 뉴스 리스트 (각 뉴스에 대한 제목, 요약, 출처 등을 표시)
- 뉴스 클릭 시 상세 페이지로 이동 (링크)
푸터:
- 페이지 정보 (예: 개발자 정보, 사용법)
구글 확장 프로그램:
- 확장 아이콘을 클릭하면 팝업 창에서 최신 뉴스 목록을 확인할 수 있게 함.
- 설정에서 알림을 켜거나 끌 수 있는 옵션 추가.

설계
기술 스택:

프론트엔드:
- HTML/CSS: 기본적인 레이아웃과 스타일링.
- JavaScript (React.js/Next.js): 동적 뉴스 로딩 및 상태 관리.
- API 연동: NewsAPI, Hacker News API를 통해 데이터를 받아와서 표시.
- 구글 확장 프로그램:
  - Manifest V3를 사용하여 확장 프로그램을 설정합니다.
  - 팝업 UI 구현을 위해 React 또는 Vanilla JS를 사용할 수 있습니다.
  - background.js와 content.js를 사용해 페이지 내용과 인터랙션 처리.
백엔드 (옵션):
- Node.js/Express로 서버를 설정하여, API 요청을 처리하고 데이터를 클라이언트에 전달할 수 있습니다.
- Firebase나 Supabase를 사용하여 사용자 정보 관리 (로그인 및 알림 설정 등).
데이터 흐름:
1. API 호출:
- 페이지 로드 시, NewsAPI와 Hacker News API에서 데이터를 불러옵니다.
- 사용자가 카테고리나 검색어를 입력하면 해당 API에서 필터링된 뉴스를 반환합니다.
1. UI 표시:
- 뉴스 목록을 화면에 출력합니다. 각 뉴스 항목은 제목, 요약, 출처 링크 등을 포함합니다.
  - 사용자가 제목을 클릭하면 해당 뉴스 사이트로 이동할 수 있도록 링크를 제공합니다.
1. 알림 기능 (구글 확장 프로그램):
- 사용자가 설정한 조건에 따라, 예를 들어, 하루 한 번 주요 뉴스가 업데이트되면 알림 API를 통해 팝업 또는 알림을 제공합니다.

UI/UX 디자인:

주요 화면:
- 헤더에 카테고리 선택 (한국 뉴스, 개발 뉴스 등)과 검색창을 두어 사용자가 원하는 뉴스를 쉽게 찾을 수 있도록 합니다.
- 각 뉴스는 제목과 요약을 보여주고, 클릭하면 전체 기사로 이동할 수 있는 링크를 제공합니다.
- 리스트 뷰로 구현하여, 사용자가 여러 뉴스 항목을 한 번에 볼 수 있게 합니다.
구글 확장 프로그램 UI:
- 확장 프로그램 아이콘을 클릭하면 팝업 창이 나타나며, 주요 뉴스 목록을 간단한 카드 형식으로 보여줍니다.
- 카드에 뉴스 제목, 간단한 설명, 출처 링크를 포함시켜 사용자가 쉽게 클릭할 수 있도록 합니다.
- 설정 옵션에서 알림을 켜거나 끌 수 있게 합니다.

구체적인 구현 계획
1. API 연동 및 데이터 처리

NewsAPI와 Hacker News API를 사용하여 데이터를 받아오는 작업을 먼저 합니다.

fetch() 또는 axios를 사용하여 API 호출을 수행하고, 받은 데이터를 화면에 출력합니다.

예시 코드 (NewsAPI)

const fetchNews = async () => {
  const response = await fetch('https://newsapi.org/v2/top-headlines?country=kr&apiKey=YOUR_API_KEY');
  const data = await response.json();
  return data.articles;
  };

// 뉴스 목록 출력
const displayNews = async () => {
const articles = await fetchNews();
 articles.forEach(article => {
 console.log(article.title); // 기사 제목 출력
 });
};

구글 확장 프로그램 개발
- manifest.json 설정 (구글 확장 프로그램 필수 설정)

{
  "manifest_version": 3,
  "name": "Daily News",
  "description": "Get daily news updates",
  "version": "1.0",
  "permissions": ["activeTab", "notifications"],
  "background": {
  "service_worker": "background.js"
  },
  "action": {
  "default_popup": "popup.html"
  },
  "icons": {
  "16": "icons/news-16.png",
  "48": "icons/news-48.png",
  "128": "icons/news-128.png"
  }
}

팝업 UI (popup.html):

<div>
  <h2>Today's News</h2>
  <ul id="news-list"></ul>
</div>

background.js (매일 아침 자동 업데이트)

chrome.runtime.onInstalled.addListener(() => {
  fetchNews().then(news => {
  chrome.storage.local.set({ dailyNews: news });
  });
});

알림 기능 (구글 확장 프로그램)

알림은 구글 확장 프로그램에서 제공하는 chrome.notifications API를 사용하여, 새로운 뉴스가 있을 때 사용자에게 알림을 표시할 수 있습니다.

chrome.notifications.create({
  type: 'basic',
  iconUrl: 'icons/news-128.png',
  title: 'New Daily News',
  message: 'Check out the latest news!',
  priority: 2
});

배포 및 테스트

웹페이지 배포: Netlify, Vercel 등 무료 호스팅 서비스를 사용하여 웹페이지를 배포합니다.
구글 확장 프로그램 배포: 크롬 웹스토어에 확장 프로그램을 업로드하여 배포합니다.

후속 개발 및 개선

사용자 로그인 기능 추가: 사용자 맞춤형 뉴스 제공을 위해 로그인 기능을 추가할 수 있습니다.
다양한 뉴스 소스 추가: 다양한 뉴스 API를 추가하여 더 많은 출처에서 뉴스를 가져올 수 있습니다.
다국어 지원: 다국어 기능을 추가하여, 다른 언어 사용자들도 이용할 수 있도록 할 수 있습니다.

이러한 기획과 설계를 통해, 주요 뉴스 웹사이트나 구글 확장 프로그램을 효율적으로 구축할 수 있을 것입니다. 각 기능을 구체화하고, 사용자에게 유용한 뉴스 서비스를 제공할 수 있습니다!

-> GPT가 답변을 잘 해줬습니다. 답변 붙여넣기는 들여쓰기가 자동으로 안되기 때문에 조금 보기 불편할 수도 있습니다ㅜ
모든 답변을 붙여넣기는 어렵기 때문에 중요한 부분만 보여드리겠습니다. (이런 부분은 영상으로 만드는게 편할거 같긴 합니다.)

My Thoughts💡: 저는 시간이 없습니다. 오늘은 주말 토요일인데 다른 할 일도 많기 때문에 오늘 안에 간단히 끝내고 싶습니다.
또한 다른 프로젝트 했던 경험에서 로그인, DB가 들어가는 순간 시간이 오래 걸립니다.
하지만 간단 뉴스 서비스에서는 로그인할 필요가 없고, 저장할 데이터도 없어보입니다.

Q. 하루 안에 가능하게 해봐

하루 안에 뉴스 제공 웹사이트 또는 구글 확장 프로그램을 완성하는 것은 매우 빠듯한 일정이지만,
핵심 기능만 최소화하여 작업할 수 있습니다. 이런 경우에는 기본적인 뉴스 제공 시스템만 구현하고, 후속 개선 작업은 지속적으로 진행하는 방식으로 진행할 수 있습니다.

1. 핵심 목표 (하루 내 완료 가능한 범위)
   뉴스 데이터 제공: NewsAPI와 Hacker News API를 통해 최신 뉴스 가져오기
   웹사이트 또는 구글 확장 프로그램 UI: 간단한 뉴스 목록 표시
   기본적인 알림 시스템: 최신 뉴스 알림
   최소한의 사용자 경험 (UX): 검색 기능 및 카테고리 선택

2. 구현할 핵심 기능
1) 뉴스 데이터 제공
   NewsAPI와 Hacker News API를 통해 한국 뉴스 및 개발 관련 뉴스 제공.
   카테고리별 뉴스 제공 (예: 개발, 글로벌, 한국 뉴스 등).
2) UI 설계 (최소화된 기능)
   - 메인 페이지:
     - 헤더: "오늘의 주요 뉴스"
     - 뉴스 리스트: API로 받아온 뉴스 항목을 간단히 표시 (타이틀, 요약, 출처 링크) 각 뉴스 항목을 클릭하면 원본 뉴스로 이동
     - 검색 기능: 뉴스 검색을 통해 키워드 기반 필터링
     - 알림 기능: 페이지 로드 시 최신 뉴스 표시, 크롬 알림 API를 사용하여 사용자가 최신 뉴스에 대한 알림을 받을 수 있게 하기
3) 구글 확장 프로그램 (선택 사항)
   - 뉴스 목록을 간단히 표시하는 팝업 UI
   - 사용자에게 알림을 제공하여 뉴스 업데이트

3. 개발 시간 분배
   1단계: 환경 설정 (2시간)
   - API 키 확보: NewsAPI, Hacker News API에서 API 키를 받음
   - 개발 환경 준비: React/Next.js 또는 간단한 HTML/CSS/JS 페이지 설정
   create-react-app 또는 Next.js 초기화
   
   2단계: 데이터 수집 및 표시 (4시간)
   - NewsAPI와 Hacker News API 연동
   - 뉴스 데이터를 가져오는 API 요청 코드 작성
   - 카테고리별 뉴스 필터링
   - 각 뉴스 항목의 제목, 링크, 요약 등의 정보를 표시하는 기본적인 UI 구현
   UI 구성:
   - 뉴스 리스트 페이지 디자인
   - 각 뉴스 항목에 링크 추가 (클릭 시 뉴스 페이지로 이동)
   
   3단계: 알림 기능 추가 (2시간)
   - 브라우저 알림: 최신 뉴스 알림을 크롬 알림 API를 통해 제공
   - 페이지 로드 시 새 뉴스가 있을 경우 알림 발생
   
   4단계: 배포 및 테스트 (2시간)
   - 배포 준비: 웹사이트는 Netlify, Vercel 등을 통해 배포
   - 구글 확장 프로그램은 Chrome Web Store에 등록
   - 테스트: 각 기능(뉴스 제공, 검색, 알림 시스템)을 간단히 테스트
   
   문제 수정 및 최종 확인
   하루 동안 개발할 수 있는 기능
   
   웹사이트:
   - 뉴스 데이터 제공 (한국 뉴스, 개발 뉴스 등)
   - 뉴스 항목을 간단히 리스트로 출력
   - 뉴스 항목 클릭 시 원본 뉴스 페이지로 이동
   - 기본적인 알림 시스템 구현 (새 뉴스가 있을 때 알림)
   - 기본적인 UI (디자인 없이 리스트만 출력해도 최소화 가능)
   - 구글 확장 프로그램 (선택 사항):
   - 뉴스 목록을 팝업으로 간단히 제공
   - 페이지 방문 시 새 뉴스가 있으면 알림 제공
   
4. 기능이 최소화된 상태에서 기대되는 결과
   뉴스 제공 웹사이트나 구글 확장 프로그램을 통해 하루에 한 번 주요 뉴스를 쉽게 확인할 수 있는 시스템이 완성됩니다.
   주요 기능을 빠르게 구현한 후, 후속 개선을 통해 사용자 맞춤형 뉴스 제공, UI/UX 개선, 더 많은 뉴스 소스 추가 등을 진행할 수 있습니다.
   
5. 예상 개발 시간 (최소화된 기능 기준): 8시간 이내
   - 환경 설정: 2시간
   - 뉴스 제공 및 UI 개발: 4시간
   - 알림 기능 및 배포: 2시간
   
6. 배포 및 배포 후 작업
   - 배포: 웹사이트는 Vercel 또는 Netlify에 배포하여 바로 사용할 수 있게 합니다.
   - 확장 프로그램 배포: Chrome Web Store에 등록하고, 사용자 피드백을 받아 개선 사항을 반영합니다.
   결론:
   하루 안에 뉴스 제공 기능을 갖춘 웹사이트 및 구글 확장 프로그램을 구현하려면 핵심 기능만 집중하여 최소화된 범위 내에서 개발을 완료할 수 있습니다.
   이 프로젝트는 첫날에 기초적인 기능을 제공하고, 후속 작업을 통해 점진적으로 기능을 확장하는 방향으로 진행할 수 있습니다.

Q. 🌟 해당 서비스 개발을 시키기 위한 프롬프트 작성
서비스 컨셉 작성

서비스 컨셉: "뉴스 랩" (News Lab)
서비스 목적
"뉴스 랩"은 사용자가 하루 한 번 주요 뉴스를 손쉽게 확인할 수 있도록 돕는 웹사이트 및 구글 확장 프로그램입니다. 이 서비스는 NewsAPI와 Hacker News API를 활용하여 한국 뉴스와 개발 관련 뉴스를 제공하며, 최신 뉴스를 빠르고 효율적으로 확인할 수 있는 경험을 제공합니다. 사용자는 이 서비스를 통해 원하는 카테고리의 뉴스와 함께 주요 이슈를 파악하고, 하루를 시작하는 데 필요한 정보를 얻을 수 있습니다.

핵심 기능
주요 뉴스 제공:

NewsAPI와 Hacker News API를 통해 주요 뉴스(한국 뉴스, 개발 뉴스, 기타 분야 뉴스 등)를 제공합니다.
카테고리별 뉴스 필터링 기능: 한국 뉴스, 글로벌 뉴스, 개발 뉴스 등.
각 뉴스 항목을 클릭하면 원본 뉴스 페이지로 이동할 수 있도록 링크 제공.
알림 기능:

페이지 로드 시 최신 뉴스가 있을 경우, 브라우저 알림을 통해 사용자가 실시간으로 알림을 받을 수 있습니다.
사용자가 방문하지 않았을 경우, 하루에 한 번 중요한 뉴스를 알리는 알림을 제공하여 놓친 뉴스를 쉽게 확인하도록 도와줍니다.
간단한 UI 디자인:

사용자가 뉴스 목록을 쉽게 탐색할 수 있도록 직관적인 디자인을 제공합니다.
검색 기능을 통해 특정 뉴스나 키워드를 쉽게 검색할 수 있습니다.
뉴스 제목, 간단한 요약, 출처 등의 기본적인 정보만 표시하여 빠르게 정보를 제공할 수 있도록 합니다.
구글 확장 프로그램:

웹사이트와 동일한 기능을 제공하며, 구글 크롬 브라우저에 설치하여 바로 사용할 수 있습니다.
확장 프로그램 팝업에서 최신 뉴스를 간단히 확인하고, 알림을 받을 수 있습니다.
서비스 사용 흐름
웹사이트:

사용자는 웹사이트에 접속하여 최신 뉴스를 확인합니다.
뉴스 항목을 클릭하여 원본 기사를 읽거나, 특정 카테고리를 선택하여 원하는 뉴스만 필터링할 수 있습니다.
사용자가 웹사이트를 방문할 때마다 최신 뉴스에 대한 알림을 받을 수 있습니다.
구글 확장 프로그램:

확장 프로그램을 설치한 후, 브라우저에서 클릭만으로 최신 뉴스 팝업을 확인할 수 있습니다.
뉴스 목록을 보고, 클릭하여 상세 정보를 볼 수 있으며, 알림을 받을 수 있습니다.

타겟 사용자
개발자: 최신 개발 관련 뉴스 및 트렌드를 확인하려는 개발자들
뉴스 애호가: 매일의 주요 뉴스를 빠르게 파악하고자 하는 사용자
업무를 시작하는 사람들: 하루를 시작하면서 중요한 뉴스와 정보를 빠르게 습득하고자 하는 사람들

기술 스택
Frontend: React.js / Next.js
Backend: NewsAPI, Hacker News API
알림 기능: Chrome Notifications API
구글 확장 프로그램: HTML, JavaScript (Chrome Extension API)
배포: Netlify 또는 Vercel (웹사이트), Chrome Web Store (확장 프로그램)

차별화 요소
핵심 뉴스 필터링: 사용자가 원하는 카테고리별로 뉴스를 필터링하여 제공함으로써, 관련된 뉴스를 쉽게 찾아볼 수 있습니다.
간편한 알림 시스템: 웹사이트 및 확장 프로그램 모두 실시간 알림을 통해 사용자가 놓친 뉴스를 알립니다.
일일 업데이트: 사용자가 하루에 한 번 확인할 수 있도록 매일의 주요 뉴스를 제공하여, 지속적으로 최신 정보를 얻을 수 있도록 합니다.

프롬프트 작성:
목표: "뉴스 랩" 웹사이트 및 구글 확장 프로그램 개발을 위한 기본적인 기획과 설계를 구체화하여, 사용자가 하루 한 번 주요 뉴스를 손쉽게 확인할 수 있도록 돕는 서비스를 제공합니다.

🌟 프롬프트 내용:

# 프로젝트 목표:
"뉴스 랩"은 하루 한 번 주요 뉴스와 개발 관련 뉴스를 손쉽게 확인할 수 있도록 돕는 웹사이트 및 구글 확장 프로그램입니다. NewsAPI와 Hacker News API를 활용하여 한국 뉴스, 개발 뉴스 등을 제공하고, 알림 기능을 통해 최신 뉴스를 빠르게 확인할 수 있게 합니다.

# 주요 기능:
1. 뉴스 제공:
    - 한국 뉴스, 개발 뉴스 등 다양한 카테고리별 뉴스 제공
    - 각 뉴스 항목 클릭 시 원본 뉴스로 이동 가능
    - 뉴스 항목의 제목, 요약, 출처 정보 제공

2. 알림 기능:
    - 웹사이트 방문 시 최신 뉴스 알림 제공
    - 크롬 브라우저 알림 API를 사용하여 실시간 알림 제공

3. UI 디자인:
    - 간단한 뉴스 목록 표시
    - 뉴스 검색 기능 제공
    - 직관적인 뉴스 카테고리 선택 UI

4. 구글 확장 프로그램:
    - 웹사이트와 동일한 뉴스 제공
    - 팝업으로 간단한 뉴스 확인 가능
    - 실시간 알림 기능 제공

# 기술 스택:
- **Frontend**: React.js / Next.js
- **API**: NewsAPI, Hacker News API
- **알림**: Chrome Notifications API
- **구글 확장 프로그램**: HTML, JavaScript
- **배포**: Vercel (웹사이트), Chrome Web Store (확장 프로그램)

# 예상 기간:
- **1일**: 기본적인 웹사이트와 확장 프로그램을 통해 하루 한 번 제공되는 주요 뉴스를 확인할 수 있도록 구현

# 타겟 사용자:
- 개발자, 뉴스 애호가, 업무를 시작하려는 사용자 등

# 차별화 요소:
- 카테고리별 뉴스 제공
- 실시간 알림 시스템
- 직관적인 뉴스 탐색 기능

이 프롬프트를 바탕으로 개발 팀에게 구체적인 개발 지침을 제공할 수 있습니다.

My Thoughts💡: 괜찮은 프롬프트가 나왔습니다.
뉴스 랩? 괜찮지만 서비스 이름이 완전히 마음에 들지는 않습니다.
생각해보니 서비스를 만들려면 이름과 로고가 있어야겠죠?

이후에도 몇 번 로고 생성 요청했지만 GPT 특유의 이미지 생성 디자인이 마음에 들지 않습니다.
"free logo generator"를 검색해 생성해 좀 맘에 드는 로고를 발견했지만, 막상 다운로드 받으려고 하면 무료가 아닙니다.
로고는 이후에 Claud에게 요청을 했습니다.

✨ 제가 활용해본 경험으로 GPT는 검색해야 알 수 있는 내용, 글로 정리하는 내용을 잘 만들고 실제 구현, 디자인적인 부분은 Claud가 더 잘한다고 느꼈습니다.

💻 개발 과정

그럼 아까 GPT가 만든 프롬프트를 Claud에게 시켜보겠습니다.
"Headliner"로 벌써 서비스 이름도 정해졌고,
기술 스택은 React로 작성해줬지만 저는 Next.js를 활용할 줄 알고 SEO 설정에도 편하기 때문에 Next.js로 만들어 달라고 합니다.

My Thoughts💡: 하루 안에 핵심 기능을 구현해야 하는 부분을 잘 이해하고 잘 만들어줬습니다. 실제 만들어준 코드들은 깃허브 저장소를 참고해주시기 바랍니다.
https://github.com/hi-rachel/headliner

여기서 부족하다고 느낀 다음 부분들에 대해 개선을 요청했습니다.

코드가 Next.js Page Router 예시라 Next.js App router 환경으로 요구

코드를 그대로 붙여넣으면 타입 경고가 나기 때문에 타입을 다시 잘 작성해달라고 요구

radix를 설치하라고 했으면서 실제로 shadcn ui를 사용해 나는 import 오류

바로 오류 없는 변경된 코드를 적용시켰고, 결과물은 UI 라이브러리를 활용해 반응형으로 금방 세련된 UI로 구현이 완료되었습니다.

✨ 결과물

My Thoughts💡: 다음 부분들을 발전시켜봤습니다.

meta tag 작성

로고, og image, manifest.json 파일 생성

PWA 설정

크롬 확장 프로그램으로 만들어 볼까? 했지만 지금 단계에서 굳이 필요가 없을거 같아 진행하지 않고,
간단한 PWA 설정은 있으면 편할거 같아 구현 진행했습니다.
이거 할까? 말까? 필요성이 있을까? 고민이 되는 부분도 AI한테 물어보세요.

1. meta tag 작성

기본 Next.js layout 파일을 붙여놓고 많은 사람들이 들어왔으면 좋겠으니 SEO를 위해 메타 태그를 작성해달라고 합니다.

layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={${geistSans.variable} ${geistMono.variable} antialiased}
      >
        {children}
      </body>
    </html>
  );
}

Q. Meta tag 작성해줘

2. 로고, og image, manifest.json 파일 생성

알아서 필요한 부분들을 더 만들어 줄까? 하고 물어봅니다.
응 만들어줘!

🤩 꽤 괜찮은 로고를 한 번에 만들어줘서 놀랐습니다... 맘에 드니 바로 활용해줬습니다!

summary_large_image는 카카오톡 공유, 트위터 공유시 뜨는 미리보기 이미지에 필요합니다. (생성해준 metadata를 보면 필요한 이미지들을 알 수 있으니 참고하면 됩니다.)

로고, opengraph image는 만들어줬지만
favicon.ico 파일과 manifest.json에 들어가는 512x512, 192x192 이미지 등 더 필요한 부분들은 검색을 통해 해결합니다.
-> https://www.favicon-generator.org/ 추천

Next.js App router 환경에서는 app 폴더 하위에 favicon.ico 파일을 넣으면 자동 적용됩니다.
나머지 자료들은 public 폴더 경로에 넣어주면 되고 자동 생성된 이미지와 manifest.json에 파일 이름과 경로를 맞춰줍니다.

3. PWA 설정

👉 제가 해결한 과정을 보면 알 수 있듯이 모르겠는 부분은 물어보면 됩니다.

AI도 실수할 수 있고 거짓말 할 수도 있습니다.
이미 아는 내용이면 스스로 검증할 수 있지만 잘 모른다면 다른 AI한테도 물어보고 구글 검색도 하면 됩니다.

예전에도 개발은 구글링이었지만, 요즘은 정말 검색해서 거의 다 알 수 있고 검색도 AI가 대신해줘~ 코딩도 대신해줘~ 아무리 검색해도 해결이 안되는 문제다? -> 나보다 경험있는 개발자에게 물어보기 (온라인 - stackoverflow, 각종 개발 커뮤니티), 공식 문서 제대로 읽기 공부하기

🦄 배포, 오류 고치기

깃허브에서 저장소를 만들고 바로 연결해줍니다.
연결하는 법도 다 써있죠?

git remote add origin https://github.com/hi-rachel/test.git
git branch -M main
git push -u origin main

올릴려면 커밋을 해야겠죠?
커밋 메시지도 AI가 잘 작성해줍니다. 조금 수정해서 원하는 대로 올립니다.

자, 이제 Vercel에 로그인해 깃허브 계정을 연결해 바로 배포해줍니다.
(무료로 활용할 수 있고 제 경험상 가장 쉽고 편리하기 때문에 Vercel로 진행했습니다. Next.js + Vercel 🖤)

🛠️ 오류

빌드하면서 나오는 오류도 그대로 추천해주는 링크 읽어보고, 검색해서 고치면 됩니다.

Open graph 이미지는 svg에서 png로 바꿔주기
Next.js에서 Viewport 권장사항 따르기

끝! -The end-

🫶 사이트 방문하기: https://headliner-news.vercel.app/
🌟 Github: https://github.com/hi-rachel/headliner

📍 추천

AI를 활용해 빠르게 서비스를 만드는 것에 관심이 있다면 추천하는 영상입니다.

딩코딩코 - AI 를 이용해서 단 3일만에 서비스 만들기. (기획, 디자인, 개발 다해줌)

딩코딩코 - 48시간 안에 무엇이든지 개발해드립니다 [Ep1]

해당 영상을 봤을 때 제가 평소에 쓰는 방식이랑 비슷해서 놀랐습니다.

이런 간단한 서비스를 가지고 포스팅하는게 조금 망설여졌지만, 저는 유튜브를 하지 않기 때문에 글로 설명하는 컨텐츠를 만들어 보고 싶었습니다.
물론 Open API를 활용해서 정말 빠르게 만들 수 있었지만, 직접 백엔드 API까지 구현했다면 훨씬 시간이 걸렸겠죠! (지금은 개발보다 이 글을 쓰는데 시간이 배로 걸렸습니다..)

무조건 빠르게 만드는게 답은 아니지만, 새로운 기술들에 관심을 가지고 있어야 그런 부분들을 활용해 최대한 효율을 뽑아낼 수 있는 부분은 뽑아낼 수 있다고 생각합니다.

정말 하루가 다르게 발전하고, 새로운 기술들이 나와서 저는 유튜브, 개발 커뮤니티 등을 통해 정보를 얻고 있습니다.

사이드 프로젝트를 하다보면 기간이 너무 길어지고 미뤄지다 보면 흐지부지 되는 경우도 굉장히 많은데 핵심 기능들만 빠르게 구현하고 괜찮으면 점점 발전시키는 것도 굉장히 좋은 방법이라고 생각합니다.

저는 개발자라 어느 정도 관련 지식이 있어 AI를 활용할 때 문제 해결력이 좀 더 높다고 생각하지만, 비개발자도 공부를 좀만 한다면 가능할거라 생각합니다. 꼭 엄청 어려운 코딩을 해야 서비스를 만들 수 있는건 아니니까요. NoCode툴을 활용할 수도 있고 Firebase 등과 같은 BaaS도 활용할 수 있습니다.

저는 프론트엔드 개발자였지만 최근에는 AI를 활용해 백엔드 개발, DB 연동, 도커 활용도 문제없이 진행한 경험이 있습니다.
(부족한 부분은 특강, 강의 등을 들었습니다.)

📍 기타 얘기

침착맨 - AI야 침착맨이 좋아? 김풍이 좋아?

이번 개발은 해당 영상을 보면서 했는데요..
진짜 이제는 AI로 정말 정말 많은 걸 할 수 있습니다.
GPT랑 대화도 이제 자연스럽게 가능하니 영어 회화에도 가끔 이용합니다.

스트레스 받으면 괴롭혀도 보십쇼.
근데 점점 흑화해서 대들까봐 무섭네요..
예전에는 꼬박 존댓말 했는데 요즘 반말도 자주 하더라구여 😅

1시간만에 만든 서비스라 물론 부족한 부분이 있습니다. 소프트웨어는 항상 유지보수가 필요하겠죠.

구현 중간 중간 env 환경 변수 관리라던지 vercel 설정 등 이 역시 AI에게 물어봐도 바로 알 수 있는 내용이라 생략했는데 혹시 궁금하시면 댓글 달아주세요.

여기까지 읽어주셔서 감사합니다. 피드백은 환영합니다 🤗

Raina

기존 블로그: https://hi-rachel.tistory.com

이전 포스트