Choviet 빌드 로그 5화: 못생긴 앱을 예쁘게

기능은 만들었다.
하지만 못생겼다.

기본 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열.

한 줄로 반응형이 된다.

디자인은 어렵지 않았다.

시간이 걸렸을 뿐이다.
하나씩, 하나씩.

색을 고르고,
여백을 조절하고,
버튼을 다듬었다.

못생긴 앱이 조금씩 예뻐졌다.

내일은 채팅을 만든다.