[클래식소믈리에] 메인, 문답 시작 페이지 완성

오늘의 작업

디자인을 마치고 메인과 문답 시작 페이지를 완성했다.

원래 pc에 적합한 ui로 디자인했었으나 아무래도 서비스 특성상

모바일 기기로의 공유가 빠를 것 같다는 생각이 들었다.

나 이거 해봤는데 너도 해봐 하면서 공유하는 그런 느낌의 서비스.

인스타 같은 곳에 올리기에도 모바일에 최적화되는 편이 나을 것 같아서 디자인을 수정했다.

핸드폰 화면에 들어갈 정도의 좁은 영역을 사용하는 방향으로 바꾸었다.

 

어려웠던 점

1. tailwind가 아직 익숙하지 않다.

css보다 분명 쉬운 부분도 있지만 문법을 정확히 몰라 계속 문서를 찾아보며 헤맸다.

특히 너비와 높이를 설정함에 있어서 어려움을 많이 겪었다.

header와 footer를 포함해서 스크롤바가 생기지 않게 길이를 딱 맞추고 싶은데

그게 아무리 해도 잘 되지 않았다.

결국은 인터넷 검색을 통해 min-h-screen과 style에 calc를 통해 높이를 지정하는 방법을 찾았다.

 

2. 디자인에 대한 고민

내가 전문 디자이너가 아니고 또 디자인을 따로 배운적도 없다보니

그런데서 오는 어려움이 있었다.

와이어프레임을 제대로 그리지 않고 했더니 도대체 패딩과 마진은 얼마를 줘야하며

컴포넌트를 만들었다가도 이리저리 바꾸느라 앱에 오류가 생기기도 했다.

디자이너 없이 일을 진행할 때는 좀 더 확실히 계획을 잡고 해야지.

 

앞으로의 할 일

아직 어떤 질문과 곡을 넣을지 정하지 못했다.

개발보다 이런 데이터 부분에 좀 더 시간이 걸릴지도...?

잘 만들어서 주변의 클래식 애호가들에게 공유해야지!

 

<메인>

 

<문답 시작 화면>