기능은 만들었다.
하지만 못생겼다.
기본 Rails 화면.
회색, 검정, 링크 파란색.
아무도 쓰고 싶지 않은 모습이다.
Tailwind CSS
CSS 프레임워크.
클래스 이름만 붙이면 디자인이 된다.
<button class="bg-blue-500 text-white px-4 py-2 rounded"> 버튼 </button>
이렇게 쓰면,
파란 배경에 흰 글씨,
둥근 모서리 버튼이 나온다.
디자이너 없이도 만들 수 있다.
홈 화면
거래글 카드를 나열한다.
사진은 왼쪽,
제목과 가격은 오른쪽.
그림자 살짝,
호버하면 살짝 올라오는 효과.
작은 디테일이 신뢰를 만든다.
반응형
컴퓨터에서도 보이고,
폰에서도 보여야 한다.
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
작은 화면엔 1열,
중간은 2열,
큰 화면은 3열.
한 줄로 반응형이 된다.
디자인은 어렵지 않았다.
시간이 걸렸을 뿐이다.
하나씩, 하나씩.
색을 고르고,
여백을 조절하고,
버튼을 다듬었다.
못생긴 앱이 조금씩 예뻐졌다.
내일은 채팅을 만든다.