웹 템플릿 무료 배포

UI&UX 디자이너 포트폴리오로 사용하기 좋은 랜딩페이지 샘플입니다.

Fawziuiux(https://www.figma.com/community/file/1364626512225196457/portfolio-personal-portfolio-5)에 의해 오픈소스로 공개된 피그마 템플릿을 이용하여 제작되었습니다. 공개해주셔서 감사합니다. HTML 버전에 이어서 Next.js로 제작된 버전 또한 오픈소스로 공개하고 있습니다. 아래 버튼을 눌러 다운 받을 수 있습니다.

HTML 버전 : https://ctee.kr/item/store/49683

Next.js 버전 : https://ctee.kr/item/store/49844

각 페이지에 대한 자세한 설명은 위의 링크에서 확인할 수 있습니다.

제작후기

간략하게 제작 후기를 남겨보자면, 아무래도 HTML 템플릿보다는 Next.js가 제작이 더 수월했습니다.
HTML,SCSS,JS를 이용한 템플릿 제작은 일단 CSS 명명 부터가 많은 시간을 소요합니다. 무슨 이름을 지어야 중복되지 않을까? 어떻게 CSS와 HTML 구조를 잡아야 재활용이 가능할까? CSS 명명 규칙이 누가봐도 설명이 필요없을정도로 명확한가? 이런 부분들에서 일단 스트레스를 많이 받습니다.

하지만 NEXT.JS와 같이 - 컴포넌트 기반으로 UI를 구성해나가는 프레임워크를 사용하면, 약간은 이야기가 달라집니다. 일단 저는 tailwindcss를 사용하는 것을 선호하는데, 때문에 CSS 명명에 대해서 고민할 필요가 없습니다. tailwindcss 특성상 HTML 구조에서 css class명이 잔뜩 길어지는 문제가 있는데, 이 부분은 컴포넌트를 부분 부분 나누어 아토믹 디자인 개념으로 접근하면 어느정도 보완이 가능합니다.

그리고 재활용성이 뛰어난 ShadCN UI와 같은 잘 만들어진 UI 컴포넌트들을 활용하면, 바퀴를 새로 발명하는것 같은 불필요한 시간을 줄여주고, 커스터마이징의 폭이 넓어서 유연하게 대응할 수 있습니다. 그래서 상대적으로 제작에 대한 스트레스가 적고, 균일한 품질을 내기 좋습니다.