Skip to main content

ChatGPT와 함께 인스타그램과 같은 Next.js 웹서비스 만들어보기

오늘은 ChatGPT와 함께 인스타그램과 같은 Next.js 웹서비스를 한번 만들어보겠습니다. 참고로 Next.js 관련 자세한 내용은 Next.js 공식가이드도 첨부 합니다. 모르는 부분이나 TodoApp 외 궁금한 부분들은 공식 문서를 참고 하시기 바랍니다.

인스타그램 정도의 웹페이지 라면 최소 기능만 구현하더라도 여러 페이지가 필요하고 그에 따라서 라우팅, 레이아웃, 스타일링 등을 구현해야 합니다. 이러한 기능들을 구현하는데에는 의외로 많은 코드를 작성해야 합니다. 그래서 아래와 같은 순서로 진행해볼 예정입니다.

  • 전체 레이아웃 코드 작성
  • 주요 Tab별 기능 확인
  • 각 Tab별 기능 구현
  • 1) Home Tab 구현
  • 2) Explore Tab 구현
  • 3) NewPost Tab 구현
  • 4) Activity Tab 구현
  • 5) Profile Tab 구현

참고로 ChatGPT와 함께 만든 코드로 아래와 같은 페이지가 만들어집니다. 인스타그램 클론코딩 데모

1. 전체 레이아웃 코드 작성​

먼저 ChatGPT에게 아래와 같이 인스타그램과 같은 Next.js 웹서비스를 만들어보겠다고 프롬프트를 요청 합니다.

ChatGPT프롬프트
I'm going to develop a simple instagram like webapp with next.js. Tab Bar layout, modern ui/ux style. give me step by step guide with code example.

그럼 아래와 같이 ChatGPT가 답변을 해줍니다. 참고로 답변은 프롬프트 지니를 통해 번역된 결과 입니다.

먼저 React Native로 하이브리드 앱 작성 하는 코드를 잘 설명해주고 있습니다. 인스타그램 클론코딩 요청에 대한 답변

그럼 ChatGPT가 알려준 것 처럼 전체 레이아웃 코드를 작성 해 보겠습니다.

1.1 개발 환경을 설정합니다.​

1.2. 새 Next.js 프로젝트를 만듭니다.​

npx create-next-app instagram-clone
cd instagram-clone

1.3 필요한 종속성을 설치합니다.​

npm install --save react-icons styled-components @emotion/react @emotion/styled

1.4 사용자 지정 _app.js 파일을 만듭니다.​

  • pages/_app.js에 새 파일 만들기 다음 내용을 추가합니다.
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

1.5 탭 표시줄 레이아웃과 최신 UI/UX 스타일을 디자인합니다.​

  • 프로젝트 루트에 components 폴더를 만듭니다.
  • components 폴더 안에 TabBar.js 파일을 만듭니다.
import React from 'react';
import styled from '@emotion/styled';
import { FiHome, FiSearch, FiPlusSquare, FiHeart, FiUser } from 'react-icons/fi';

const TabBarContainer = styled.div`
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  height: 60px;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
`;

const TabIcon = styled.div`
  font-size: 24px;
  color: #555;
`;

const TabBar = () => {
  return (
    <TabBarContainer>
      <TabIcon>
        <FiHome />
      </TabIcon>
      <TabIcon>
        <FiSearch />
      </TabIcon>
      <TabIcon>
        <FiPlusSquare />
      </TabIcon>
      <TabIcon>
        <FiHeart />
      </TabIcon>
      <TabIcon>
        <FiUser />
      </TabIcon>
    </TabBarContainer>
  );
};

export default TabBar;

1.6 기본 페이지에 TabBar 구성 요소를 추가합니다.​

pages/index.js 파일을 열고 내용을 다음과 같이 업데이트합니다.

import Head from 'next/head';
import TabBar from '../components/TabBar';

export default function Home() {
  return (
    <div>
      <Head>
        <title>Instagram Clone</title>
        <meta name="description" content="Simple Instagram Clone using Next.js" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        {/* Your main content goes here */}
      </main>

      <TabBar />
    </div>
  );
}

이제 탭 표시줄 레이아웃과 현대적인 UI/UX 스타일을 갖춘 간단한 Instagram과 유사한 웹 앱이 있습니다. 인증, 이미지 업로드 및 게시물 표시와 같은 기능을 추가하여 이 기반을 더욱 강화할 수 있습니다.

npm run dev 또는 yarn dev를 실행하여 개발 서버를 시작하고 브라우저에서 http://localhost:3000을 열어 앱이 작동하는지 확인하십시오.

2. 주요 Tab별 기능 확인​

전체 적인 레이아웃을 만들었으니 이제 아래와 같이 각 Tab별로 기능을 확인해 보겠습니다.

ChatGPT프롬프트
I also want to add following tabs with simple features. suggest each tab and it's feature list.

그럼 아래와 같이 ChatGPT가 답변을 해줍니다. 참고로 답변은 프롬프트 지니를 통해 번역된 결과 입니다.

인스타그램 클론코딩 기능 요청 답변

답변에 나온 기능들은 ChatGPT 토큰 제한으로 다음 프롬프트 요청에 사용될수 있으니 따로 메모를 잘 해둡니다.

3. 각 Tab별 기능 구현​

먼저 각 Tab별 전환 하는 기능을 구현해 보겠습니다. Tab 전환 기능을 만들어주고 각 Tab들은 간단한 페이지로만 작성 해달라고 ChatGPT에게 요청 합니다.

ChatGPT프롬프트
I'll implement each simple tab pages and switch tab page with next.js routing system. give me the code example

그럼 아래와 같이 ChatGPT가 답변을 해줍니다. 참고로 답변은 프롬프트 지니를 통해 번역된 결과 입니다.

탭전환 기능 구현 답변

탭 페이지를 구현하고 Next.js 라우팅 시스템을 사용하여 페이지 간에 전환하려면 각 탭에 대해 별도의 페이지를 만들고 해당 페이지에 대한 링크를 포함하도록 TabBar.js 구성 요소를 업데이트해야 합니다. 다음은 코드 예입니다.

3.1 pages 폴더의 각 탭에 대한 페이지 파일을 생성합니다.​

  • home.js
  • explore.js
  • new-post.js
  • activity.js
  • profile.js

단순화를 위해 각 페이지에서 자리 표시자 콘텐츠로 시작할 수 있습니다.

// home.js, explore.js, new-post.js, activity.js, profile.js
import TabBar from '../components/TabBar';

export default function Home() {
  return (
    <div>
      <h1>Home Page</h1> {/* Change this text for each page */}
      <TabBar />
    </div>
  );
}

Next.js 링크를 포함하도록 TabBar.js 구성 요소를 업데이트합니다.

import React from 'react';
import styled from '@emotion/styled';
import { FiHome, FiSearch, FiPlusSquare, FiHeart, FiUser } from 'react-icons/fi';
import Link from 'next/link';

const TabBarContainer = styled.div`
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  height: 60px;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
`;

const TabIcon = styled.div`
  font-size: 24px;
  color: #555;
`;

const TabBar = () => {
  return (
    <TabBarContainer>
      <Link href="/home">
        <TabIcon>
          <FiHome />
        </TabIcon>
      </Link>
      <Link href="/explore">
        <TabIcon>
          <FiSearch />
        </TabIcon>
      </Link>
      <Link href="/new-post">
        <TabIcon>
          <FiPlusSquare />
        </TabIcon>
      </Link>
      <Link href="/activity">
        <TabIcon>
          <FiHeart />
        </TabIcon>
      </Link>
      <Link href="/profile">
        <TabIcon>
          <FiUser />
        </TabIcon>
      </Link>
    </TabBarContainer>
  );
};

export default TabBar;

이제 아이콘을 클릭하면 탭 표시줄이 다른 페이지로 이동합니다. 이전 pages/index.js 파일을 제거하고 pages/_app.js에서 /에서 /home으로 리디렉션을 설정해야 합니다.

import { useRouter } from 'next/router';
import { useEffect } from 'react';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    if (router.pathname === '/') {
      router.replace('/home');
    }
  }, [router]);

  return <Component {...pageProps} />;
}

export default MyApp;

이러한 변경 사항을 통해 Next.js 라우팅을 사용하는 간단한 탭 기반 탐색 시스템을 갖게 됩니다. 해당 페이지 파일 내에서 각 탭의 기능 구현을 시작할 수 있습니다.

3.2. Home Tab 구현​

이제는 tab하나씩 하나씩 구현을 요청 해봅니다.

ChatGPT프롬프트
Write a  home.js for  Home tab with modern ui/ux style.

아래와 같이 코드 작성 방법이 안내가 됩니다.

최신 UI/UX 스타일로 홈 탭에 대한 home.js 페이지를 만들려면 다음 단계를 따르세요.

새 레이아웃과 스타일로 home.js 파일을 업데이트합니다.

import React, { useState, useEffect } from 'react';
import styled from '@emotion/styled';
import TabBar from '../components/TabBar';

const Feed = styled.div`
  margin: 0 auto;
  max-width: 600px;
  padding: 20px 0;
`;

const Post = styled.div`
  background-color: white;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
`;

const PostHeader = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid #efefef;
`;

const User = styled.div`
  display: flex;
  align-items: center;
`;

const Avatar = styled.img`
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
`;

const Username = styled.span`
  font-weight: 600;
`;

const PostImage = styled.img`
  width: 100%;
  height: auto;
`;

const PostActions = styled.div`
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #efefef;
`;

const ActionButton = styled.button`
  background: none;
  border: none;
  font-size: 20px;
  margin-right: 15px;
  cursor: pointer;
`;

const Home = () => {
  const [posts, setPosts] = useState([]);

  // Replace this function with a real API call
  useEffect(() => {
    // Fetch posts from API here
    const fetchPosts = async () => {
      const dummyPosts = [
        {
          id: 1,
          user: {
            username: 'user1',
            avatar: 'https://via.placeholder.com/32',
          },
          imageUrl: 'https://via.placeholder.com/600x400',
        },
        {
          id: 2,
          user: {
            username: 'user2',
            avatar: 'https://via.placeholder.com/32',
          },
          imageUrl: 'https://via.placeholder.com/600x400',
        },
      ];

      setPosts(dummyPosts);
    };

    fetchPosts();
  }, []);

  return (
    <div>
      <Feed>
        {posts.map((post) => (
          <Post key={post.id}>
            <PostHeader>
              <User>
                <Avatar src={post.user.avatar} alt={post.user.username} />
                <Username>{post.user.username}</Username>
              </User>
            </PostHeader>
            <PostImage src={post.imageUrl} alt="Post" />
            <PostActions>
              <ActionButton>❤️</ActionButton>
              <ActionButton>💬</ActionButton>
              <ActionButton>🔗</ActionButton>
            </PostActions>
          </Post>
        ))}
      </Feed>
      <TabBar />
    </div>
  );
};

export default Home;

이 코드는 최신 UI/UX 스타일로 간단한 홈 탭 페이지를 만듭니다. 게시물은 사용자 아바타, 사용자 이름 및 이미지와 함께 피드에 표시됩니다. 레이아웃에는 좋아요, 댓글 작성을 위한 작업 버튼도 포함되어 있습니다.

이렇게 작성된 코드를 실행 시켜보면 아래와 같습니다.

Home화면

ChatGPT 프롬프트로만 만들어진 코드 치고는 UI구성도 어느정도 되어 있어 생각보다 잘 만들어진것 같네요

3.2 Explore Tab 구현​

그 다음으로 Explore Tab을 구현 해보겠습니다. explore.js 만 작성해달라고 했더니 토큰 제한으로 기존의 내용을 기억하지 못하는거 같아 위에서 노트한 Explore Tab의 기능을 알려주면서 페이지를 작성 해달라고 요청 해보았습니다.

ChatGPT프롬프트

Write a  explore.js  for Explore tab with modern ui/ux style. remember following features:
- Display a grid of photos and videos from various users.
- Implement an infinite scroll to load more content as the user scrolls.
- Add a search bar to search for specific users or hashtags.
- Show trending tags and user recommendations.

그럼 아래와 같이 답변이 나오고 하나씩 따라해보겠습니다.

최신 UI/UX 스타일로 탐색 탭에 대한 'explore.js' 페이지를 만들려면 다음 단계를 따르세요.

  • react-infinite-scroll-component 패키지를 설치합니다.
npm install react-infinite-scroll-component

새 레이아웃과 스타일로 explore.js 파일을 업데이트합니다.

import React, { useState, useEffect } from 'react';
import styled from '@emotion/styled';
import TabBar from '../components/TabBar';
import InfiniteScroll from 'react-infinite-scroll-component';

const Container = styled.div`
  padding: 20px;
`;

const SearchBar = styled.input`
  display: block;
  width: 100%;
  padding: 12px 20px;
  margin: 0 0 20px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
`;

const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-gap: 4px;
`;

const GridItem = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
`;

const Explore = () => {
  const [images, setImages] = useState([]);
  const [hasMore, setHasMore] = useState(true);

  // Replace this function with a real API call
  const fetchImages = async () => {
    const newImages = [
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
      'https://via.placeholder.com/150',
    ];

    setImages((prevImages) => [...prevImages, ...newImages]);

    // Set 'hasMore' to false when there are no more images to load
    // setHasMore(false);
  };

  const handleSearch = (event) => {
    console.log('Search:', event.target.value);
    // Implement search functionality here
  };

  useEffect(() => {
    fetchImages();
  }, []);

  return (
    <div>
      <Container>
        <SearchBar
          type="text"
          placeholder="Search for users or hashtags..."
          onChange={handleSearch}
        />
        <InfiniteScroll
          dataLength={images.length}
          next={fetchImages}
          hasMore={hasMore}
          loader={<h4>Loading...</h4>}
        >
          <Grid>
            {images.map((image, index) => (
              <GridItem key={index} src={image} alt="Thumbnail" />
            ))}
          </Grid>
        </InfiniteScroll>
      </Container>
      <TabBar />
    </div>
  );
};

export default Explore;

이 코드는 최신 UI/UX 스타일로 간단한 탐색 탭 페이지를 만듭니다. 다양한 사용자의 사진 및 동영상 그리드를 표시하고 무한 스크롤을 구현하여 사용자가 스크롤할 때 더 많은 콘텐츠를 로드합니다. 특정 사용자나 해시태그를 검색할 수 있는 검색창이 있습니다. 검색 기능, 이미지 가져오기, 트렌드 태그 또는 사용자 추천은 API를 사용하여 구현해야 합니다.

fetchImages 함수를 실제 API 호출로 교체하여 이미지를 가져오고 handleSearch 함수를 업데이트하여 API를 사용하여 검색을 수행해야 합니다.

이렇게 알려주고 있습니다.

- 검색 기능 추가​

검색 기능이 동작 하지않아 검색 기능을 요청 해봅니다.

ChatGPT프롬프트
I also want to implement global search through search api  with test data.

테스트 데이터와 함께 사용자가 검색창에 입력하면 검색 결과가 드롭다운 목록에 표시는 기능이 완성 되었습니다. 실제 적용시에는 테스트 데이터를 사용하며 실제 애플리케이션에서 실제 API 호출로 대체해서 완성 할 수 있습니다.

3.3 NewPost Tab 구현​

이번에는 NewPost Tab을 만들어봅니다.

ChatGPT프롬프트
Write a  new_post.js  for NewPost tab with modern ui/ux style. remember following features:
- Allow users to capture or upload a photo or video.
- Provide basic photo editing features like cropping, filters, and adjustments.
- Let users add a caption, location, and tag other users in the post.
- Allow users to share the post on other social media platforms.

ChatGPT답변 - NewPost 만들기

3.4 Activity Tab 구현​

이번에는 NewPost Tab을 만들어봅니다.

ChatGPT프롬프트
Write a  activity.js  for Activity tab with modern ui/ux style. remember following features:
- Display recent activity related to the current user, such as likes, comments, and new followers.
- Show notifications for user mentions in other posts.
- Allow users to switch between "Following" and "You" sections to view activity from users they follow.

ChatGPT답변 - Activity 만들기

3.5 Profile Tab 구현​

이번에는 NewPost Tab을 만들어봅니다.

ChatGPT프롬프트
Write a profile.js  for Profile tab with modern ui/ux style. remember following features:
- Display the current user's profile picture, username, and bio.
- Show the number of posts, followers, and followings for the current user.
- Allow users to edit their profile information.
- Display a grid of the user's posts.
- Provide options to switch between grid view and list view of posts.
- Implement a "Saved" section to display posts the user has saved.

ChatGPT답변 - Profile 만들기

5. 마치며​

지금까지 ChatGPT와 함께 인스타그램과 같은 Next.js 웹서비스를 시작 해보았는데요 도움이 되셨나요? 오늘은 프론트엔드 코드만 작성 해보았지만 다음 기회에는 백엔드 코드 까지 만들어보도록 하겠습니다. 감사합니다.

참고로 완성된 소스 코드는 GitHub 링크에서 확인 하실수 있습니다.

사용했던 ChatGPT프롬프트는 링크에서 확인 가능 합니다.