Soup

Next.js로 풀스택 개발자 포트폴리오 만들기 (4) GPT-4o를 사용하여 디자인 이미지를 CSS로 구현해보기, 네비게이션 접는 라이브러리 framer motion

iamfork 2024. 6. 12. 16:34

GPT-4o를 사용하여 디자인 이미지를 CSS로 구현해 보기

 

 

Hello GPT-4o

최근 GPT-4o가 출시되었고, 이제 제한된 접근으로 무료로 사용할 수 있게 되었습니다. GPT-4o는 이미지 첨부와 GPT 탐색을 통해 확장된 경험을 제공하는 새로운 버전입니다. 이 기회를 활용하여 디자인 이미지를 CSS로 얼마나 잘 구현할 수 있는지 확인하고, 개발 속도를 높이기 위한 도움을 받아보려고 합니다.

 

무료버전 GPT-4o로 사용해 볼 수 있는 새로운 기능

  • 이미지 첨부 기능: GPT-4o는 이미지 파일을 업로드하여 이를 분석하고 이해할 수 있습니다. 이를 통해 디자인 이미지에서 필요한 CSS 코드를 생성하는 데 큰 도움을 줄 수 있습니다.
  • 확장된 GPT 탐색: 더 넓고 깊은 지식 베이스를 활용하여, 보다 정교한 코드를 생성하고, 다양한 디자인 요구사항에 맞는 설루션을 제시할 수 있습니다.

 

GPT 탐색으로 NEXT.js Copilot 확장자를 사용해 봤습니다. 

 

제가 이번에 Portfolio로 만들어 볼 디자인을 만들었고 거의 챗GPT와 비슷하게 만들었습니다.

이 이미지를 NEXT.js Copilot에 첨부해 이미 CSS코드를 출력해 주었습니다.

 

하지만 내비게이션바가 리사이징 되고 슬라이드 애니메이션을 추가해 달라고 추가 부탁했습니다.

 

 

CSS적으로는 디테일이 많이 많이 아쉬웠지만 Framer Motion을 이용해 애니메이션까지 넣고 알아서 적용해 줘서 시간적 세이브를 할 수 있었습니다. 프로 블로거들만큼 디테일을 자세하게 알려주며 혼자 개발 공부할 때 정말 부스터를 달고 할 수 있을 것 같습니다.

 

 

 

지금은 하루 리미트가 끝나서...

다음부턴 제 손길이.. 들어갈 예정입니다.

 

아래는 ChatGPT가 구성해 준 포트폴리오 내비게이션 코드입니다.

제가 구성하는 방식과 매우 흡사하고 framer-motion은 처음 사용해 보는데 애니메이션도 들어가 있고 괜찮은 라이브러리라고 생각됩니다.

// components/Navigation.js
import React, { useState } from "react";
import { motion } from "framer-motion";

const Navigation = () => {
  const [isOpen, setIsOpen] = useState(true);

  const toggleNav = () => {
    setIsOpen(!isOpen);
  };

  return (
    <motion.div
      initial={{ width: isOpen ? 256 : 80 }}
      animate={{ width: isOpen ? 256 : 80 }}
      transition={{ duration: 0.5 }}
      className="p-4 bg-white shadow-lg h-screen overflow-hidden"
    >
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center space-x-2">
          <div className="rounded-full w-12 h-12 bg-gray-300">{/* Avatar */}</div>
          {isOpen && (
            <div>
              <h2 className="text-xl font-semibold">DK</h2>
              <p className="text-sm text-gray-500">Software Developer</p>
            </div>
          )}
        </div>
        <button onClick={toggleNav} className="text-gray-500">
          {isOpen ? "<<" : ">>"}
        </button>
      </div>
      {isOpen && (
        <div>
          <div className="mt-4">
            <h3 className="text-gray-600">About Me</h3>
            <p className="text-gray-800">{"Hello, I'm a Software Engineer .."}</p>
          </div>
          <div className="mt-4">
            <h3 className="text-gray-600">Work</h3>
            <div className="space-y-2">
              <div className="flex items-center">
                <span className="flex-grow">Dari</span>
              </div>
              <div className="flex items-center">
                <span className="flex-grow">Carfit</span>
                <span className="text-gray-400">🔒</span>
              </div>
              <div className="flex items-center">
                <span className="flex-grow">Tongyang</span>
                <span className="text-gray-400">🔒</span>
              </div>
              <div className="flex items-center">
                <span className="flex-grow">Vibrary</span>
              </div>
            </div>
          </div>
          <div className="mt-4">
            <h3 className="text-gray-600">Note</h3>
            <div className="space-y-2">
              <div className="flex items-center">
                <span className="flex-grow">React</span>
              </div>
              <div className="flex items-center">
                <span className="flex-grow">Next.js...</span>
              </div>
            </div>
          </div>
          <div className="mt-4">
            <h3 className="text-gray-600">Contact</h3>
            <div className="space-y-2">
              <div className="flex items-center">
                <span className="flex-grow">Email</span>
              </div>
              <div className="flex items-center">
                <span className="flex-grow">LinkedIn</span>
              </div>
              <div className="flex items-center">
                <span className="flex-grow">Github</span>
              </div>
            </div>
          </div>
        </div>
      )}
    </motion.div>
  );
};

export default Navigation;

 

 

framer-motion을 사용하면 이렇게 자연스럽게 움직이는 폴더블 메뉴를 만들 수 있습니다.

 

사용방법은 motion.div 안에 내비게이션 전체 콘텐츠를 넣고 initial과 animate 크기를 설정하여 주시고 trasition은 애니메이션이 움직일 때 어느 정도의 duration을 사용할지 설정이 가능합니다.  그리고 아래 ClassName으로 style설정도 가능합니다. 나머지 디테일한 내용은 위에 코드를 참고하셔서 만들면 됩니다!

<motion.div
      initial={{ width: isOpen ? 256 : 80 }}
      animate={{ width: isOpen ? 256 : 80 }}
      transition={{ duration: 0.5 }}
      className="p-4 bg-white shadow-lg h-screen overflow-hidden"
>

 

반응형