[ 웹 기능 구현 ] 내 프로젝트에 딱 맞는 '프레임워크 & 스타일 & 아이콘' 조합 찾기

🎨 프레임워크 & 디자인 툴, 뭘 써야 할까? (초보자 결정 가이드)

개발 공부 시작할 때 가장 머리 아픈 게 바로 "도구 선택".

유행하는 거 무작정 따라 하지 말고, 내 목적에 맞는 최강 조합을 골라보세요!

 

1. 프레임워크 (Framework): 어떤 엔진을 달까?

구분	이름	특징	추천 상황
대세 중의 대세	React	커뮤니티가 가장 큼, 취업 시장 압도적 1위	취업이 목표라면 무조건
러닝커브 낮음	Vue.js	코드가 직관적이고 배우기 매우 쉬움	빠르게 결과물을 내고 싶을 때
풀스택 끝판왕	Next.js	검색 노출(SEO) 최적화, 최신 트렌드	실제 서비스/블로그 만들 때

 

2. 스타일 라이브러리 (CSS): 옷은 어떻게 입힐까?

• Tailwind CSS (강력 추천 🔥)
• Styled-Components
• SCSS

 

3. 아이콘 & UI 소스: 디자인 퀄리티 높이기

디자인 꽝이라도 걱정 마세요. 얘네만 있으면 전문가 느낌 납니다.

• Lucide / Phosphor Icons: * 요즘 가장 유행하는 힙하고 깔끔한 선 위주의 아이콘.
• FontAwesome: * 아이콘계의 교과서. 없는 아이콘이 없음.
• Framer Motion: * 내 웹사이트에 부드러운 애니메이션을 넣고 싶을 때 쓰는 필수 라이브러리.

 

💡 초보자를 위한 목적별 '테크 스택' 추천

CASE A. "빨리 취업하고 싶어요!"

• React + Tailwind CSS + Lucide Icons
• 이 조합이 현재 시장에서 가장 수요가 많고 트렌디합니다.

CASE B. "나만의 멋진 블로그를 만들고 싶어요!"

• Next.js + Tailwind CSS + Framer Motion
• 구글 검색 노출도 잘 되고, 화려한 애니메이션까지 챙길 수 있습니다.