이 문서는 가리사니 개발자 포럼에 올렸던 글의 백업 파일입니다. 오래된 문서가 많아 현재 상황과 맞지 않을 수 있습니다.

서론

서버 개발자로써 개인프로젝트 진행시 항상 경험하는 문제가 있다.

아무리 개인 프로젝트라도 불특정 다수에게 서비스하기 위해서는 어느정도 디자인이 중요한데… 문제는 디자인에 쓰는시간이 백엔드시스템을 구현하는시간을 가볍게 넘어버린다는 것이다.

또한 아래와 같은 문제가 있다.

1. 부트스트랩등을 쓰면 너무 동일한 디자인이 되어버린다.
2. 디자인 퀄리티의 일관성이 무너진다 (특히 기능이 많아질수록)

그러던 중 Tailwind CSS 를 소개받았다.

• https://tailwindcss.com

필자의 기술 테스트용(?) 프로젝트인 애니시아 프로젝트로 테일윈드를 테스트 해보기로 하였다.

• https://github.com/anissia-net/anissia-web-2022

필자가 테일윈드로 사이트를 리뉴얼 하고 느낀점은 다음과 같다.

장점

• 너무 동일한 규격이 되지 않으면서도 디자인의 일관성을 유지할 수 있다.
• 유/무료 디자인 UI 템플릿을 쉽게 구할 수 있다.

단점

• CSS 3까지 완벽하게 숙지하지 않은 사람들은 진입장벽이 있는 편이다.
• 클래스의 이름이 너무 길어져서 가독성이 떨어진다.
  • 특히 vue, react등과 같이 쓸 경우 코드가독에 상당히 방해된다.

추천하는 유형

• 개발자고 디자인은 잘 못하지만 부트스트랩-like 디자인을 하고 싶지 않은 경우.
• 개발자지만 유저들에게 일정이상 수준의 디자인을 제공하고 싶은 경우.
• 디자이너와 테일윈드에 대한 협업이 가능한 경우.

추천하지 않는 유형

• CSS 3 ? 그런 거 잘 모른다.
• 회사에서 1px까지 디자이너가 정한 디자인을 원하는 경우.
  • 개인적으로 그런 경우 사내 템플릿을 만드는 게 낫다고 생각한다.