[이미지 갤러리 만들기] 01. 프로젝트 시작하기

최근 Tailwind CSS로 작업한 프로젝트를 보고 한번 사용해보고 싶다는 생각이 들었는데, 마침 Tailwind CSS로 간단하게 만들어 볼 수 있는 애플리케이션에 대한 따끈따근한(!!) 튜토리얼 포스팅이 올라왔습니다. 따라서 해보는 김에 새로 알게 된 내용 정리도 할 겸 번역해서 공유해보려고 합니다. 화자를 구분하기 위해서, 본문 내용과 관련하여 추가로 학습한 부분이나 기타 덧붙이는 말은 반말로 작성하고(죄송합니다ㅠ), 원글 내용은 존댓말로 작성하도록 하겠습니다.

 

원글: Building an Image Gallery with Next.js, Supabase, and Tailwind CSS (Lee Robinson / 2022년 3월 28일)

 

* 오역 있을 수 있습니다. 댓글이나 이메일로 말씀 부탁드립니다.

 

 

Built With..

이 프로젝트에는 다음의 툴들이 사용되었습니다.:

• PostgreSQL(데이터베이스)
• Supabase(백엔드)
• Tailwind CSS(스타일링)
• Next.js(프론트엔드 프레임워크)
• Vercel(배포)

 

*추가설명*

 

1. PostgreSQL

• 오픈소스 DBMS(데이터베이스 관리 시스템: DB 데이터를 정의/조작/검색/관리하기 위해 설계된 소프트웨어. 오픈소스는 아니지만 Oracle이 대표적인 예.)

 

2. Supabase

• 일단 소개 사이트의 백그라운드 검정색이 이쁘다 ㄷㄷ #1f1f1f .. 숯 색깔!
• Supabase는 Firebase의 대체 서비스를 표방하는 오픈소스 서비스로서, 프로젝트를 빌드할 때 필요한 모든 백엔드 서비스를 제공한다고 한다. Postgres를 중심으로 구축된 서비스다.
• Supabase에서 제공하는 기능들은 다음과 같다. :
  • 데이터베이스(Database): 모든 Supabase 프로젝트에는 확장성이 뛰어난 전용 Postgres 데이터베이스가 포함된다.
  • 인증(Auth): Postgres의 빌트인 인증 기능을 최대한 활용하여, 다양한 방식으로 사용자 인증 기능을 제공한다. (이메일&비밀번호 입력 방식, 원클릭 로그인이 가능한 매직 링크, 휴대전화 로그인, 소셜 로그인)
  • 파일 저장소(File Storage): 대용량의 파일을 저장, 정리, 제공할 수 있다.
  • 자동생성 API(Auto-generated APIs): 프로젝트 DB를 위한 API를 즉시 생성할 수 있다.

 

3. Tailwind CSS

• HTML 요소에 클래스 네임을 부여하는 방식으로 원하는 스타일을 지정할 수 있어 개발 시간을 단축할 수 있으며 반응형 스타일링에 강하다. 반면 초기에 적응 기간이 좀 필요하고 HTML 부분이 지저분해 보일 수 있다는 단점이 있다.
• 스타일링 속성들을 유틸리티(utility)라고 부른다. Tailwind CSS가 사전에 정의한 클래스 네임을 부여함으로써 원하는 스타일, 즉 유틸리티를 적용할 수 있는데 이러한 클래스 네임을 유틸리티 클래스(utility classes)라고 칭한다.
• 언뜻 보면 '인라인 스타일과 다른 게 뭐지?' 싶은데 Tailwind CSS에서 설명하는 바에 따르면 그래도 인라인 스타일링에 비해 다음과 같은 이점들이 존재한다고 한다. :
  
  • 스타일링에 일정 부분 제약이 있다는 것이 장점이다. 아무런 제약이 없는 인라인 스타일과 달리, Tailwind CSS는 일정한 디자인 시스템에 맞춰 사전 정의된 스타일링을 제공하므로 시각적으로 일관된 UI를 손쉽게 구현할 수 있다.
  • 인라인 스타일과 달리 반응형 디자인이 가능하다. 인라인 스타일에선 미디어 쿼리를 사용할 수 없어 반응형 디자인을 구현할 수 없지만, Tailwind CSS에선 'md:w-32 lg:w-48'과 같은 식으로 : 문자를 이용하여 브레이크 포인트별로 유틸리티를 지정함으로써 반응형을 구현할 수 있다. (이와 관련하여 자세한 내용은 이 페이지에서 확인할 수 있다.)
  • 호버, 포커스를 비롯하여 여러 상태에 따른 스타일링이 가능하다. 인라인 스타일만으로는 호버나 포커스 상태를 캐치할 수 없지만, Tailwind CSS에선 hover:bg-sky-700과 같이 상태 변수(state variants)를 통해 상태에 맞는 스타일링을 할 수 있다. (이와 관련하여 자세한 내용은 이 페이지에서 확인할 수 있다.)

 

이 튜토리얼은?

본 튜토리얼을 통해 다음과 같은 Next.js 애플리케이션을 만들 수 있습니다. :

• Supabase를 통해서, PostgreSQL 데이터베이스로부터 데이터를 가져옵니다.
• Vercel로 재배포를 하지 않고도 데이터를 업데이트 합니다.
• next/image를 사용하여, 로딩될 때까지 블러 처리되는 최적화된 이미지를 제공합니다.
• Tailwind CSS를 사용하여 컴포넌트를 손쉽게 스타일링 합니다.

저는 swag.vercel.app이라는, Next.js 커뮤니티 구성원들이 자신들의 스웩을 뽐내는 트윗들을 모아서 보여주는 애플리케이션을 지금부터 소개해드릴 방법을 통해 만들었습니다.

 

 

시작해봅시다.

애플리케이션을 만들 준비를 합시다. 터미널에 아래의 create-next-app 명령어를 입력해 주세요. 이 명령어를 통해 Next.js 공식 예제 디렉토리에서 제공하고 있는 Next.js와 Tailwind CSS를 포함한 스타터 앱을 클론해올 수 있습니다.

npx create-next-app --example with-tailwindcss image-gallery

이 스타터 앱은 다음의 것들을 포함하고 있습니다.

• 최신 버전의 Next.js
• 코드를 포맷하고 Tailwind CSS 클래스 네임을 정리하도록 구성된 Prettier
• Next.js용으로 구성된 타입스크립트
• 사용하지 않는 불필요한 클래스 네임은 제거하도록 설정된 Tailwind CSS
• Next.js의 API route 예시

 

 

// 다음편: Next.js의 Image 컴포넌트를 사용하여 이미지 최적화하기