[Flutter] 무작정 만드는 웹(1)

박철영·2021년 7월 13일
0
post-thumbnail

Flutter 초보가 하는 Flutter를 이용하여 웹 템플릿 무작정 따라 만들어보기 시리즈

[Flutter] 무작정 만드는 웹(1)

오늘의 템플릿

https://html5up.net/striped

구글을 돌아다니다가 찾은 템플릿. 디자인이 너무 취향 저격이라 바로 이걸로 선택했다.

까다로웠던 것

1. 달력

달력만들기 꽤 난감했다. 달력이라는 것이 월에 따라 모양이 다르기때문에 은근히 까다로웠다.

원본
내가 만든 것

DateTime.now() 함수로 오늘 날짜를 구한 뒤 오늘 날짜가 있는 달의 처음과 마지막 부분을 이용하여 만들었다.
예시로 오른쪽의 내가 만든 달력을 보면 7월 1일이 목요일이라 앞의 3칸을 띄운 뒤 날짜를 시작하였고, 마지막날인 31일에서 끊긴 모습을 볼 수 있다.
각 달의 마지막 날을 아는 방법이 떠오르지 않아 다음 달 1일에서 하루 뺀 날짜를 사용하였다.

미구현 (능력 부족)

1. Texture

사실 저 템플릿의 예쁜 부분 중 하나가 배경화면의 질감이었는데, 구현하지 못하였다. 제일 아쉬운 부분이다. 뭔가 배경에 texture 파일을 입히면 될 것 같은데, 좋은 방법이 떠오르지 못해 구현하지 못하였다.

2. 그림자

템플릿의 post 부분을 보면 왼쪽에 그림자가 있어 입체감을 주지만, 내가 만든 것에는 없다. 왼쪽에 사이드 메뉴를 만들어서, 그림자를 만들 경우 사이드 메뉴를 덮는 문제가 발생하였다. Stack을 이용하여 사이드 메뉴를 위로 얹으면 될 것 같은데, 반응형웹 특성상 사이즈변경할 때 문제생길까봐 하지는 않았다.

주절주절

한 자리에 앉아 10시간을 하나만 만든 건 오랜만인 것 같다.(중간중간 유튜브도 보고 했지만...) 진짜 재미 없었으면 중간에 때려쳤을 텐데, 재밌어서 계속 하게 됐네.. 끝나자 마자 배고파 죽을 것 같다. 다음에 "무작정 만드는 웹" 시리즈를 다시 하게 된다면, 간식을 옆에 두고 해야겠다.
만들 때는 꽤 잘 만들어 보였는데, 끝나고 글을 작성하며 다시보니 너무 못만든 것 같다. 좀 더 잘하고 싶다~~

https://github.com/jyukki97/web_template/tree/main/striped_web

결과물

https://jyukki97.github.io/Stripe/#/

0개의 댓글