NextJS와 Supabase로 포트폴리오 만들어보기

daegyeo.me 포트폴리오 만들기

 

시작하기 전에,
해당 프로젝트 이야기는 처음 개발 시작한 2021년부터 현재(2024년)의 이야기를 담고 있습니다.

✏️ 서론

아마도 3년 전쯤 '그래도 개발자인데 포트폴리오 웹사이트가 있어야 되지 않을까'라는 생각에 NextJS로 포트폴리오를 만들었습니다. 기능 추가나 유지보수는 한 적이 많지만 디자인, 레이아웃을 바꾼 적은 없기 때문에 이번 기회에 사이트 디자인도 만져주고 소소한 기능들을 추가해 봤습니다.

 

사실 개발자라고 해서 꼭 웹 형태로 된 이력서, 포트폴리오가 필요한 건 아니라고 생각합니다. 오히려 pdf와 같은 오리지널 양식이 더 나은 경우도 많았고요. 그래도 이와 관계없이 개발자인데 보여주기용이라도 하나 있으면 괜찮을 거 같아 시작한 프로젝트입니다.

🖥️ 프로젝트 시작

프로젝트 시작은 2021년, 과거로 갑니다.

단순하게 NextJS를 사용해서 정적 콘텐츠를 뿌려주는 형태의 웹사이트(포트폴리오)입니다. 근데 이렇게 만드니까 내용 수정이 필요할 때마다 코드를 수정하고 GitHub에 푸시하고, 이를 배포해 줘야 제가 원하는 수정사항을 반영할 수 있습니다. 번거로운 이 과정을 줄이기 위해, 포트폴리오 내용 편집(콘텐츠 관리) 기능을 만들었습니다.

PostgreSQL에서 Supabase으로 옮겨가기

처음 기술스택은 PostgreSQL(Self-Hosted) 그리고 로그인 관리를 위해 Firebase Auth를 사용하고 NextJS를 사용해 API를 만들었습니다. 제일 필요한 기능은 콘텐츠 관리인데 콘텐츠 관리를 만들기 위해 필요한 부수적인 과정이 너무 많습니다. 요즘 제공하는 BaaS(Backend as a Service; 서비스형 백엔드) 제품들이 많은데 이걸 한 번 적용해 봤습니다.

 

이미 Firebase 제품을 쓰고 있기 때문에 그대로 쓰는 선택지도 있지만 개인적으로 구글의 문서화 스타일을 좋아하지 않습니다. 마침 Supabase가 Firebase의 대체제로 뜨고 있었고 무료 플랜 범위를 벗어날 만큼 대형 프로젝트가 아니기 때문에 Supabase를 쓰기로 했습니다.

 

Supabase 대시보드

 

Supabase는 PostgreSQL 위에서 작동합니다. 덕분에 기존 기술스택에서 마이그레이션 하기 쉬웠습니다.(그렇다고 psql에만 있는 유니크한 기능을 쓴 건 아니지만...) Database 기능 외에도 Authentication, PostgreSQL RLS를 사용한 권한 정책 그리고 뒤에서 더 이야기할 Stroage 기능 등을 제공합니다.

 

Supabase CLI에서는 타입 추론을 위해 Schema를 내보내는 기능을 지원합니다. 저 같은경우 TypeScript를 사용했기 때문에 아래 명령어를 사용하면 public schema의 구조를 뽑아낼 수 있습니다.

 

npx supabase gen types --lang=typescript --project-id "$PROJECT_REF" --schema public

 

RLS (Row Level Security)

Supabase는 RLS를 통해 권한 관리를 하고 있습니다. RLS는 영어 풀네임 그대로 행 단위로 권한 설정을 제공하는 기능입니다.

포트폴리오 웹사이트의 경우 콘텐츠는 모든 사용자가 볼 수 있어야하고(Read), 콘텐츠 추가나 수정, 삭제는 (Create, Update, Delete) 로그인한 사용자(= 관리자)만 쓸 수 있어야 하기 때문에 이에 맞게 RLS를 설정해 주면 됩니다.

 

Supabase RLS 설정하기

 

사진과 같이 모든 동작에 대해 로그인한 사용자만 사용 가능하도록 제한하고 `SELECT` 구문만 전체 사용자로 풀어주면 위에서 말한 권한 정책을 구현할 수 있습니다.

 

Supabase에 Markdown 뷰어(`react-markdown`)까지 적용해 주면 이제는 소스코드를 수정하지 않고 관리자 페이지에서 바로 콘텐츠를 수정할 수 있게 됩니다. 관리자 페이지의 경우 외부에 공개되지 않고 저만 사용하기 때문에 `chakra-ui`와 기존 색상 테마를 사용해서 간략하게 레이아웃만 잡아줬습니다.

 

관리자 페이지

🖼️ 이미지를 추가해 보자

디자인 개편 GitHub 이슈 티켓

 

시간이 또 지나고 2024년,

포트폴리오를 계속 보다 보니 내용이 부실하다는 생각이 들었습니다. 글의 분량 자체를 늘릴 수도 있지만 가장 중요한 문제는 이미지를 추가하는 기능이 없습니다. 그 외에도 폰트도 IBM Plex에서 더 읽기 쉬운 폰트로 바꾸고 싶었고 불필요한 애니메이션도 삭제하고 싶었습니다.

Figma로 디자인하기

항상 CSS로 개발부터 시작했는데 이번에는 Figma로 (디자이너만큼은 아니지만) 기초적인 틀을 잡아줬습니다.

 

Figma (디자인 속 예시는 글 내용과 무관합니다.)

 

디자인 틀을 잡으면서 중요하게 생각한 몇 가지 포인트가 있는데,

① 먼저, 읽기 쉬운 폰트이어야 합니다. 기존 포트폴리오 웹사이트는 IBM Plex Sans를 사용했습니다. 충분히 좋은 폰트지만 더 간결하고 본문 읽을 때 편한 폰트를 원했습니다. 최종 후보군으로 Pretendard와 SUIT으로 좁혔는데, 딱딱한 Pretendard보다 어느 정도 부드러움이 있는 SUIT를 최종적으로 선택했습니다.

 

② 그다음으로는 불필요한 애니메이션을 삭제하고 소개 문구를 추가했습니다. 기존에는 첫 화면에 Framer를 사용해서 간단한 텍스트 애니메이션을 넣었습니다. 다만, 이게 보이는 효과가 있을 정도로 화려한 애니메이션이 아니었고 자기소개 목적인 포트폴리오에서는 과한 효과라고 생각했기 때문에 새로 디자인할 때는 제외했습니다. 대신에 첫 화면에 간략한 소개 문구를 넣어 대체했습니다.

 

③ 마지막으로는 처음 디자인을 개편하기로 한 목적인 이미지를 표시할 수 있어야 합니다.

Supabase Stroage로 이미지 업로드 구현하기

Supabase에는 Amazon S3와 같은 서비스를 Stroage라는 이름으로 제공하고 있습니다. 위 RLS와 같은 정책 관리를 지원하기 때문에 Database와 마찬가지로 관리자 외에는 Read 동작만 할 수 있도록 권한을 설정해 주면 됩니다. Supabase에서 제공하는 템플릿을 이용하면 쉽게 권한 설정이 가능합니다.

 

Storage 권한 설정 하기

 

S3와 마찬가지로 Storage에 업로드된 객체에 대해 Public URL를 만들어주는 기능을 제공합니다. 이를 사용해서 이미지 업로드 시 생성한 Public URL를 Database에 저장해 주고, 저장한 URL를 토대로 웹 페이지에 표시해 주면 됩니다.

아래처럼 관리자 페이지에 이미지를 업로드할 수 있는 공간까지 만들어주면 이제 제 포트폴리오에서도 텍스트뿐만 아니라 이미지도 확인할 수 있는 기능이 생깁니다 😎

 

관리자 페이지 이미지 업로드 과정

 

NextJS Image 적용하기

마지막으로 업로드한 이미지를 NextJS Image 컴포넌트를 사용해 렌더링 해보겠습니다. Image 컴포넌트를 사용하면 별다른 설정 없이 이미지 최적화를 대신 맡길 수 있습니다.

Image 컴포넌트의 경우 `.png`, `.jpg`와 같은 흔하게 쓰이는 확장자를 `.webp`으로 변환해 줍니다. 또한 캐시 기능을 함께 제공해 주기 때문에 불필요한 요청을 줄일 수 있습니다. NextJS Image를 production 환경에서 사용할 경우 `sharp` 라이브러리를 사용하기를 권장하고 있기 때문에 실제로 사용할 계획이 있으면 참고하시는 게 좋을 거 같습니다. (https://nextjs.org/docs/messages/sharp-missing-in-production)

 

추가적으로 이미지의 출처가 Local이 아닌 Supabase Stroage에서 가져오기 때문에 이를 Image 컴포넌트에게 알려줘야 합니다.`nextjs.config.js`에 아래와 같이 설정을 해주면 외부 이미지도 가져올 수 있게 됩니다.

 

images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'storage-example.supabase.co'
      }
    ]
}

 

URL 설정까지 끝나면 NextJS Image 컴포넌트를 사용할 준비가 끝났습니다.

마무리

새로 디자인 개편한 기념(?)으로 처음 프로젝트를 만들 때부터 Supabase로 마이그레이션 한 과정 그리고 디자인을 수정하고 Supabase Stroage를 활용하는 과정까지 소개해봤습니다. 사실 새로 디자인을 한다 했지만 기존 레이아웃과 색감을 벗어나지 못했는데 디자인 감각을 더 키운다면 이 부분은 수정해서 다시 한번 소개해보도록 하겠습니다 😅

 

이 글에서 소개한 포트폴리오는 daegyeo.me 주소에서 확인할 수 있습니다. 감사합니다.

 

GitHub: https://github.com/SkyLightQP/daegyeo.me

GitHub - SkyLightQP/daegyeo.me: My portfolio with supabase - daegyeo.me