티스토리 뷰
Flutter를 배우겠다고 선언한 지 2주 정도가 지났다. 사실 배우겠다고 선언해놓고 이리저리 삽질하느라 일주일동안은 거의 아무 노력도 안했고 시간이 좀 지나서야 천천히 시작한 것 같다. 지금까지 느낀 인상이랑 앞으로의 계획 정도를 간략히 남겨보겠다.
간단히 몇 개의 문법하고 몇 개의 기본 클래스들의 Docs를 읽어보고 아는 만큼 쓰고 모르는 만큼 찾아가면서 Flutter를 공부하고 있다. 내가 간과한 사실이 Flutter가 Dart 기반의 언어라는 것인데 그냥 무턱대고 Flutter를 배우려다가 Dart 기본 문법을 몰라 반복문이나 변수 정의 같은걸 하나도 못했다. 그래서 클래스 몇 개를 보다가 Dart 문법이나 배우러 가서 Flutter를 써먹으려 간단한 앱 만드는 걸 시작하는 데 시간이 좀 걸렸다.
Dart와 별개로 Flutter를 처음 써볼 때 뭔가 막히는 게 많았다. 내가 평소에 뭔갈 하나라도 만들어보면서 맞으면서 배우는 걸 좋아하는 편이라 Flutter의 동작 원리를 이해하지 않고 일단 닥치고 앉아서 깔라는 거 깔고 간단히 시간을 띄우는 시계를 만들어볼까 했는데 정말 많이 막혔다. 일단 켜서 화면에 Hello World를 써봤는데 이거부터 굉장히 혼란을 줬다.
웬 까만 화면(이건 사실 시스템 디폴트가 다크모드라 그럴 것이라 예상한다)에 진짜 그냥 "Hello World"만 썼을 뿐인데 지혼자 볼드체 하고 빨갛게 칠하고 두 줄짜리 노란색 밑줄까지 그어주는 친절함을 보여줬다. 그래서 일단 이걸 없애는 것 부터 시작했다.
플러터는 Widget이라는 내장 클래스로 내가 하고자 하는 일을 내 클래스에 담아서 여러 함수와 함께 클래스를 완성시키는 정신을 가지고 있다. 그래서 저기 HelloWorld를 쓸 때도 Text라는 위젯을 화면에 넣어주세요 라고 코드를 썼다. 이제 요상한 효과를 제거하기 위해서 Text 위젯 안에 TextStyle로 스타일을 정해줬다. HTML의 div 박스와 같은 역할을 하는 것 처럼 보이는 Container로 감싸줘서 정렬도 해주고 했다.
코드는 대충 요런 모양새였는데 뭔가 HTML에서 어떤 태그를 쓰면 바로바로 <style>을 써서 얘가 어떤 모양새로 있어야 할지를 정해주는 느낌이었다. 다른 말로 하면 css를 안쓰는 html 같은 느낌이다. 근데 이건 지금처럼 간단히 만들 때라서 그런거지 저 TextStyle을 또 변수로 정해서 밖으로 빼고 하면 css를 분리하는 것처럼 간결하게 쓸 수 있을 것 같다.
제목에서부터 알 수 있듯이 처음으로 할 간단한 프로젝트로 시계를 만들고 싶었다. 시계를 만들기 위해서는 현재 시간을 가져오고 이걸 매 초 업데이트를 해주어야 한다. 매초 업데이트를 여기선 Stream.periodic을 쓰는 것 같아 보였다. 그리고 다행히 DateTime이 내장이라 시간 가져오는 건 쉬웠다. 뭔가 자바에서 볼 법한 문법인 toString을 써서 String으로 바꿔주고 적절히 잘라주고 해서 시간을 표시했다. 딱 켰을 때의 시간이 정확히 정수 초에 가까운 시간이 아닐 수 있어서 더 정밀한 시계를 위해서 Interval을 0.1초로 해서 소수점을 버려주는 방식으로 구현했다.
이제 폰트를 추가하고 배경에 뭘 그리고 이리저리 요래조래 해서 스타일링을 해줬다.
참고로 사용한 폰트는 Sketch Block이다. 여러 기능을 추가해서 연습은 마무리 할 예정이다.
앞으로도 간단간단한 프로젝트들을 잡아 만들어보면서 필요한 것들을 배워볼 예정이다. 처음부터 강좌를 듣거나 docs를 읽으면 이게 어디 쓰이는지도 모르고 또 실제로는 안 쓸 법한 내용들도 배우게 되는데, 이러면 경험적으로 흥미를 쉽게 잃는 것 같았다. 그래서 막히는 부분을 그때그때 찾아보고 감을 익힌 후에 기초를 다지러 갈 예정이다.