TNT : Tailwind CSS + Next.js + TypeScript 조합에 대한 분석과 실제 프로젝트에서의 경험 공유

TNT : Tailwind CSS + Next.js + TypeScript 조합에 대한 분석과

실제 프로젝트에서의 경험 공유

 

1. TNT 스택(Tailwind CSS + Next.js + TypeScript)란?
2. 각각의 이점
   
   • 2-1 Next.js: 강력한 React 프레임워크
   • 2-2. TypeScript: 정적 타입 지원 및 개발 생산성
   • 2-3. Tailwind CSS: 빠르고 효율적인 UI 개발 및 유지보수
3. 결합을 통한 이점
   
   • 3-1 Next.js와 TypeScript
   • 3-2. Next.js와 Tailwind CSS
   • 3-3. TypeScript와 Tailwind CSS
4. 실제 프로젝트에서의 경험 공유
   • 4-1. 프로젝트 적용 사례
   • 4-2. 팀 협업에서의 이점
   • 4-3. 배운 점과 느낀점
5. 마무리

 

 

---

1. TNT 스택(Tailwind CSS + Next.js + TypeScript)란?

현대의 프론트엔드 개발은 더 이상 단순한 웹 페이지 표시를 넘어 다양한 기능과 풍부한 사용자 경험을 제공해야 합니다. 이에 따라 프론트엔드 개발 스택은 더욱 강력하고 효율적인 도구와 기술들을 결합해야 합니다. 그 중에서도 TNT 스택 (Tailwind CSS + Next.js + TypeScript)은 현대 프론트엔드 개발에 새로운 가능성을 제시하고 있는 강력한 조합입니다.

 

Tailwind CSS는 유틸리티 기반의 CSS 프레임워크로, 간결하면서도 강력한 스타일링을 제공합니다. Next.js는 React를 기반으로 한 프레임워크로, 서버 사이드 렌더링과 정적 사이트 생성을 효과적으로 지원합니다. 마지막으로 TypeScript는 정적 타입을 도입하여 코드의 안정성을 높여주는데, 이는 개발자에게 신뢰성 있는 코드 작성을 가능하게 합니다.

 

이 조합은 뛰어난 생산성과 성능 최적화를 동시에 제공합니다. 개발자는 간결한 코드로 놀라운 UI를 구축할 수 있으며, 프로젝트는 초기 로딩 성능 향상과 검색 엔진 최적화를 이루어냅니다. TNT 스택은 현대 웹 애플리케이션의 요구 사항을 충족시키면서도 높은 효율성을 유지하는 데 기여하고 있습니다. 이 글에서는 TNT 스택의 각 기술적 이점과 조합의 이점에 대해 자세히 살펴보겠습니다.

 

2. 각각의 이점

2- 1. Next.js: 강력한 React 프레임워크

Next.js는 React 기반의 프레임워크로, 다양한 렌더링 옵션을 제공합니다. SSR과 SSG를 통해 웹 애플리케이션의 성능을 향상시키고, TypeScript를 기본적으로 지원하여 안정성과 가독성을 높입니다. 이는 React UI를 기반으로 하면서도 서버 렌더링, 라우팅, 데이터 가져오기와 같은 기능을 효과적으로 해결할 수 있도록 도와줍니다.

• 서버 사이드 렌더링 (SSR): 초기 로딩 성능 개선과 SEO 향상을 위해 서버 사이드 렌더링을 지원합니다.
• 정적 사이트 생성 (SSG): 빌드 시점에 사전 렌더링하여 성능을 최적화할 수 있는 내장된 정적 사이트 생성 기능을 제공합니다.
• 간편한 라우팅: 파일 시스템 기반의 라우팅 구조를 제공하여 라우팅 설정을 단순화하고 유지보수를 용이하게 합니다.

 Next.js에 대한 더 자세한 내용은 아래의 글을 참고해주세요.

https://reveur1996.tistory.com/147

[Next.js] Next.js | 기술적 분석 + 사용해보며 느낀점

 

2-2. TypeScript: 정적 타입 지원 및 개발 생산성

TypeScript는 JavaScript의 상위 집합 언어로, 정적 타입을 활용하여 안정성과 가독성을 향상시킵니다. 정적 타입 검사를 통해 미리 타입 오류를 방지하고, 강력한 IDE 지원을 통해 개발 생산성을 높일 수 있습니다.

• 정적 타입 검사: 개발자가 코드의 안정성을 높이고 런타임 오류를 사전에 방지할 수 있습니다.
• IDE 지원: 코드 자동 완성, 리팩토링, 디버깅 등의 기능을 통해 개발 생산성을 향상시킵니다.
• 코드 가독성: 타입 정보를 활용하여 코드의 가독성을 높이고 협업 시 유지보수를 용이하게 합니다.

 TypeScript에 대한 더 자세한 내용은 아래의 글을 참고해주세요.

https://reveur1996.tistory.com/146

[TypeScript] TypeScript 타입스크립트 | 기술적 분석 + 사용해본 후 느낀점

 

2-3. Tailwind CSS: 빠르고 효율적인 UI 개발 및 유지보수

Tailwind CSS는 유틸리티 기반의 CSS 프레임워크로, 클래스를 사용하여 스타일을 정의합니다. 이는 CSS 코드의 재사용성과 유지 보수성을 향상시키며, 미리 정의된 유틸리티 클래스를 활용하여 빠르게 디자인 시스템을 구축할 수 있습니다.

• 유틸리티 우선 디자인: 미리 정의된 클래스를 활용하여 빠르게 UI를 개발하고 커스터마이징하기 용이합니다.
• 작은 번들 크기: 사용되는 스타일만을 생성하여 최소한의 CSS 파일 크기로 성능을 최적화합니다.
• 가독성과 일관성: 클래스 기반의 스타일링을 통해 가독성을 유지하면서도 일관성 있는 디자인을 유지합니다.

 Tailwind CSS에 대한 더 자세한 내용은 아래의 글을 참고해주세요.

https://reveur1996.tistory.com/140

[CSS] Tailwind CSS 분석 + 실제로 프로젝트에 적용해보며 느낀점

 

이러한 기술들의 조합은 강력한 프론트엔드 스택을 형성하여 개발자에게 뛰어난 경험과 효율성을 제공합니다.

 

3. 결합을 통한 이점

Next.js, TypeScript, 그리고 Tailwind CSS는 각각의 기술적 특성을 결합하여 프론트엔드 개발에서의 다양한 측면을 강화하고 개선하는 데 기여합니다. 

 

3- 1. Next.js와 TypeScript

• 서버 사이드 렌더링 (SSR) 및 정적 사이트 생성 (SSG)
  Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 강력하게 지원합니다. SSR은 웹 애플리케이션의 페이지를 서버에서 사전에 렌더링하므로 초기 로딩 속도가 개선되고 검색 엔진 최적화(SEO)에 이점을 제공합니다. TypeScript는 정적 타입을 도입하여 코드의 안정성을 향상시키고, 개발자가 더 신뢰성 있는 코드를 작성할 수 있도록 지원합니다.

3-2. Next.js와 Tailwind CSS

• 효율적인 스타일링
  Tailwind CSS는 유틸리티 클래스를 활용하여 스타일을 적용하는 방식으로, 개발자가 디자인에 집중할 수 있도록 돕습니다. Next.js에서 Tailwind CSS를 적용하면 별도의 스타일 파일을 생성할 필요 없이 간편하게 스타일을 적용할 수 있습니다. 이는 개발자들이 일관된 디자인을 유지하고 개발 시간을 단축하는 데 큰 도움이 됩니다.

3-3. TypeScript와 Tailwind CSS

• 자동 완성 및 정적 분석
  TypeScript는 정적 분석을 통해 코드의 타입 안정성을 제공하며, 개발자가 코드 작성 중 발생할 수 있는 오류를 빠르게 찾을 수 있도록 도와줍니다. Tailwind CSS의 스타일 유틸리티 클래스를 사용할 때, TypeScript의 자동 완성 및 정적 분석은 유틸리티 클래스를 정확하게 활용할 수 있도록 지원하며, CSS 스타일 관련 오류를 최소화합니다.

이러한 이점들을 함께 사용한다면, 개발자는 더욱 효율적으로 웹 애플리케이션을 개발할 수 있습니다. Tailwind CSS의 간편한 스타일링과 커스터마이징, Next.js의 SSR 및 정적 사이트 생성, TypeScript의 타입 안정성이 결합되어 더욱 뛰어난 사용자 경험과 개발 생산성을 제공할 수 있습니다. 이러한 기술들은 현재 웹 개발 커뮤니티에서 인기가 있고, 실제로 많은 개발자들이 그들의 프로젝트에 적용하고 있습니다.

 

4. 실제 프로젝트에서의 경험 공유 

4-1. 프로젝트 적용 사례

인턴으로 근무할 때 참여했던 프로젝트에서 처음으로 3가지 기술들을 사용해보았습니다.  TF팀에서 진행하던 프로젝트로 기획이 진행중인 단계였고, 기획의 의도에 맞게 빠르게 기능들을 구현해서 테스트하며 기획을 검증하고 수정해가는 과정이었습니다. 따라서 팀에 소속된 디자이너 없이 프론트엔드 개발자들이 직접 화면단을 기획팀의 의도에 맞게 구현해야 했습니다. 제가 팀에 합류 했을 당시에는 이미 프로젝트 초기 세팅과 기본적인 로직들이 구현된 이후 였기에 기술 스텍의 선정에 대해서는 그대로 따라야하는 상황이었습니다. 다만 회의를 진행하며 기술 스텍에 대해 CTO를 포함한 팀원들과 활발하게 피드백을 주고 받았고, 그 과정에서  현재 팀 상황에 가장 적합하다고 판단하여 선택한 기술이라는 생각이 들었습니다.

 

4-2. 팀 협업에서의 이점

TNT 스텍을 선택한 것이 적합하다고 판단했던 근거로는 첫번째로 개발 속도였습니다. 제가 팀에 합류하고 어떤 것들을 맡게 될지, 어떤 것들을 앞으로 목표로 하고 있는지 전달 받았을 때 가장 강조하셨던건 스피드 였습니다. 계속해서 기획이 변경되는 상황에서 빠르게 결과물을 보고 피드백을 할 수 있도록 개발 일정에 맞추는 것이 제일 중요했습니다.

 

그런 조건 속에서 Tailwind CSS는 가장 큰 메리트를 가진 기술이었습니다. 사실 팀으로 작업할 때 CSS가 상당부분 시간을 소요하게 됩니다. 이전의 팀프로젝트 경험에서도  UI통일성과 style 중첩 문제, className 문제 등등 여러 가지로 오류가 발생할 가능성이 많아 개발하면서 상당히 애를 먹었던 경험이 있습니다. 그리고 CSS에서 스트레스를 받는 팀원들을 종종 볼수 있었습니다. 그러나 Tailwind CSS는 이러한 문제들로부터 자유로울수 있다는 점에서 이전의 경험과 비교했을 때 훨씬 수월하게 팀 프로젝트가 진행되었습니다. 우선 다자인에 대한 가이드라인이 없는 상황에서 빠르게 개발을 진행할 수 있었던 것은 Tailwind CSS에서 제공하는 style component를 사용하였기 때문입니다. 회사에서 이 style component를 유료 맴버십으로 가지고 있어 사용을 적극 권장하고 있었고, 실제로 기능 구현 전 관련된 component 소스들을 리스트업해서 회사에 요청하여 개발에 사용했던 경험이 있습니다. 확실히 바로 적용이 가능한 component 소스들을 활용하여 기능 구현에 집중 할 수있어 개발 생산성이 크게 증가하였고, 이러한 컴포넌트들은 팀내에서 공유하여 사용할 수 있어 전체 팀 생산성에도 기여할 수 있었습니다. 또한 Tailwind CSS에서 정해진 색상표와 사이즈를 활용하여 UI의 통일성을 편리하게 유지할 수 있었고, 특히 CSS와 관련된 피드백을 주고 받을 경우 Tailwind CSS에서 제공하는 범위안으로 가이드라인을 정해두니 피드백을 하는 입장과 받는 입장 모두 더 빠르게 이해할 수 있어 의사소통이 편했습니다. 

 

 Next.js는 간단한 방식으로 라우팅이 가능하다는 점이 가장 편리했습니다. 초기 개발 과정에서 신경 써야할 부분들에서 시간을 절약할 수 있어 저뿐만 아니라 팀원도 상당히 만족하는 부분이었고, 이로인해 팀 전체 개발 속도에 작지만 긍정적인 영향을 끼쳤다고 생각합니다.  또한 HMR, zero  config 기능으로 빠르게 수정 사항들을 반영하고 vercel을 통한 자동 배포까지 더하여 빠르게 개발을 진행 할 수 있었습니다. 프로젝트 중후반부터는 배포 된 상태에서 계속 수정 작업이 진행되었는데 이때 팀원들과 동시 다발적으로 개발을 진행하면서 수정 사항들을 맞춰나가다보니 장점으로 더 와 닿았습니다. 

 

TypeScript의 경우는 초기에 학습 난이도가 있어 어려움도 있었지만, 타입을 명시함으로써 코드에 대한 이해도를 높일 수 있어 다른 팀원이 작성한 코드를 보고 빠르게 로직과 데이터의 흐름을 이해하고 개발을 진행 할 수 있어 편리했습니다. 특히 객체 구조로 자료를 넘겨받을 경우 확인하는 과정을 따로 거치지 않고 명시된 타입을 통해서 바로 확인 할 수 있어 프로젝트 전체 코드를 읽고 이해하는 과정에서 편리함을 느꼈습니다. 또한 여러 개발자가 함께 개발을 진행하다보니 한페이지에서 동시에 개발을 진행하는 과정에서 중복되는 데이터를 호출하거나, 불필요한 데이터를 호출하는 경우가 있었는데 이때 데이터 타입을 보고 해당 문제를 빠르게 파악하여 코드를 수정했던 경험이 있습니다. 아무래도 여러명이 함께 개발을 진행하다보면 발생하는 문제들에 대해 타입스크립트가 가지는 코드의 안정성이 장점으로 작용하여 문제 해결 도움이 되었습니다. 

 

 

4-3. 배운 점과 느낀점

이전에는 자바스크립트로만 개발을 해서 타입스크립트가 특히나 생소했던 기억이 납니다.  기술들의 단점으로 러닝커브에 대한 의견이 많아 걱정스런 마음으로 인턴 시작전부터 미리 TNT 스텍들을 공부하기 시작했었습니다. 처음으로 사용해보는 기술들이라 걱정이 되었는데 막상 프로젝트에 투입되어 개발을 진행하면서 느낀것은 생각보다 러닝커브가 대단히 높지 않다는 것이었습니다. 물론 어려운 부분들도 분명히 있었습니다. 하지만 처음 공식문서를 바탕으로 이전에 코드들을 파악하는데애 생각보다 어려움이 없었습니다.

 

Tailwind CSS 는 걱정이 컸던 것에 비해 가장 빠르게 적응했던 것 역시 Tailwind CSS 였습니다. 처음에는 기존에 경험했던 SCSS또는 Styled-components와 다른 형식이라 어색했지만, 직관적인 코드 진행 방식이 오히려 이전의 경험과 잘 융화되어 학습 난이도가 낮게 느껴졌습니다.  또한 VScode의 extension tool을 사용하면 색상이나 사이즈등 미리 정의된 스타일에 대한 리스트를 미리보기로 볼수 있어 굳이 모든 용어들을 다 외우지 않아도 적절하게 사용할 수 있어 개발 생산성이 향상됨을 느꼈습니다. 다만 코드가 길어질 수록 스타일과 HTML 코드의 경계가 모호해지고 이로인해 전체 가독성이 떨어진다는 점은 아쉬웠습니다.

 

타입스크립트는 러닝커브가 있어 초기에 적응하기까지 어려움이 있었습니다. 워낙 다양한 타입이 존재하기 때문에 타입을 명시하는 과정이 아직도 어렵기는하지만 그래도 타입을 지정함으로 인해 런타임 시에만 알 수 있었던 많은 에러들을 미리 발견하여 해결할 수 있어 개발의 전반적인 측면에서는 개발 생산성이 향상되었다고 생각합니다. 일각에서는 타입을 명시하느라 더 많은 코드를 작성해야 하고, 타입 에러를 해결라느라 더 많은 시간이 소요되는 것이 아니냐는 의견들도 있지만 타입스크립트에 익숙해질수록 그 부분에 소요되는 시간은 줄어들것이라는 생각을 했습니다. 실제로 프론트엔드 팀장이께서 직접 코드 리뷰를 해주시며 타입을 관리하는 방법에 대해 알려주셨는데 그렇게 체계적으로 관리만 해도 확실히 타입을 명시하는 과정에서 발생하는 시간을 상당부분 단축할 수 있었습니다. 타입스크립트가 러닝커브가 있어 처음 사용하게 될 경우에는 시간과 에너지 소모가 크지만 사용하면서 익숙해질수록 편리한 도구가 될 수 있다고 생각했습니다. 그래서 이후 타입스크립트 스터디를 통해 지속적으로 학습을 진행하고 개인 프로젝트 또한 타입스크립트로 진행해 타입스크립트에 익숙해지려고 노력하고 있습니다.

 

Next.js는 라우팅과 관련해 처음에 규칙만 제대로 이해하면 그 이후로는 큰 어려움없이 개발을 진행할 수 있어 비교적 빨리 적응한 기술이었습니다. 위의 두가지 기술들은 사용하면 불편한 점들이 있었지만 Next.js는 사용하면서 불편함을 느낀적이 없었습니다. 개발자 친화적인 도구라는 생각을 했습니다. 개발을 진행하는 과정에서 느끼는 편리함도 있지만 Next.js의 장점은 랜더링이나 배포 이후 단계와 관련하여 더 장점이 많은 것 같습니다. 사실 진행했던 프로젝트에서는 서버사이드 랜더링의 장점을 느끼지 못했습니다.  Next.js로 편리하게 SSR을 구현하여 SEO에 유리하다는 점은 알고 있었지만 프로젝트가 내부 데이터 관리용 시스템 개발이었기 때문입니다. 팀 전체 회고에서도 이부분에 대한 아쉬움을 언급하기도 했었습니다. 하지만 그 외 vercel을 통한 자동 배포 후 바르게 코드 수정을 반영할 수 있는 Hot Module Replacement 기능과 같이 Next.js의 주요 기능들이 가지는 이점이 많아 전체적으로 개발하는 과정에서 편리하다는 느낌을 받았습니다. 

 

전반적으로 장점이 두드러지는 기술 조합이라고 생각합니다. 다만 개인적으로 아쉬운 부분은 TypeScript와 Next.js를 더 폭넓게 활용하지 못했다는 점입니다. 단기간에 빠르게 기술을 학습하고 진행하다보니 체계적으로 학습을 하고 프로젝트에 적용하지 못하고 그때 그때 필요한 영역들을 빠르게 학습해서 개발을 진행하다보니 프로젝트 종료 후 아쉬움이 남는 부분들이 있었습니다. 그래서 이후에도 계속 강의와 스터디를 통해 이 점을 보완하고 학습한 내용을 바탕으로 개인 프로젝트에 적용해보며 기술들을 익히고 있습니다. 

 

5. 마무리 

TNT 조합으로 개발을 진행하며 협업을 하는 과정에서 편리하는 것을 느꼈습니다. 확실히 호환성이 좋은 기술들을 함께 사용함으로써 생기는 시너지도 있는 것 같습니다. 요즘 심심치않게 TNT조합에 대한 언급이 보입니다. 물론 이 조합이 최선의 선택인가하면 그건 프로젝트와 팀의 가치관에 따라 달라질 것 같습니다. 다만 팀프로젝트에 이어 개인 프로젝트까지 진행하면서 느낀점 프론트엔드 개발자가 풀스텍으로 빠르게 프로젝트를 빌드하기에 꽤 괜찮은 조합의 기술스텍이라는 것입니다. 제 주변에서도 이 조합으로 개인 프로젝트를 단기간에 완성한 분들이 종종 보입니다. 학습 난이도가 높다는 의견 때문에 망설이는 경우도 있으시겠지만 개인적으로는 한번쯤 꼭 경험해 보시기를 추천합니다. 그만큼 매리트가 분명히 존재하는 기술들 같습니다. 

 

---

참고 문

Tailwind CSS | Next.js

NextJS+Typescript and Tailwind: A match made in heaven | devdojo.com

Styling: Tailwind CSS | Next.js

Using Next.js with TypeScript | LogRocket Blog

https://haodev007.medium.com/using-tailwind-css-next-js-typescript-like-a-pro-integration-40ad8fed0c75