(TIL) 2020-10-10 기록

오늘 한 일

• 사실 저번 주에도 작업을 했지만 생각보다 작업량이 너무 많아서 블로그에 포스트를 하기 힘들었다.
• 지난 주에 했던 작업은 우리 앱 보이스 카드의 동그란 프로필 사진과 그 주변의 테두리, 재생 중일 때 빙글빙글 돌아가는 인디케이터를 만드는 것이었다.
• 로직 자체는 어려운 게 아니나 UI를 디자이너가 그린 그대로 만들어내기가 조금 어려웠다.
• 특히 인디케이터는 약 pi/10 정도의 각도를 가지는 호인데 이걸 flutter custompainter의 drawarc로 만들면 조금 제한이 있다. 왜냐하면 drawarc와 paintingStyle을 stroke로 해서 만드는 호는 부채꼴을 먼저 그린 뒤 가운데를 비우는 것이기 때문에 실질적으로 flutter에서 인식되기로는 부채꼴로 인식된다. 그래서 그림자 같은 걸 먹여도 부채꼴에 그대로 먹히게 된다.
• 그래서 나는 어떻게 했냐면 customPath를 이용하여 호를 하나 그리고 바깥쪽으로 반원을 그리고 다시 호를 반대편으로 그리고 다시 안쪽으로 반원을 그려서 인디케이터를 만들었다.
• 그러나 여전히 예쁜 그림자를 만드는 게 문제였는데 거의 이틀을 끙끙 앓다가 혹시나 싶어서 AdobeXD에 들어가 어떻게 만들어졌는지를 보니 그림자라기보다는 단순히 blur처리된 색깔이었다. 그래서 인디케이터를 생성하는 함수를 그대로 쓰되 stroke의 폭을 넓히고 blur 처리를 했더니 똑같이 나왔다.
• 오늘은 크게 가시적인 결과물은 없었지만 코드들을 보기 좋게 리팩토링 하고 국가 코드 alpha2 형태의 문자열을 해당하는 국가의 국기 emoji로 변환하는 함수를 만들었다. 잘 작동한다. 이 함수는 이 코드를 참조하여 만들었다.
• 그리고 오늘은 보이스 카드에서 프로필 사진 부분 외에 다른 곳을 클릭하면 이 보이스 카드가 확대되면서 좀 더 세부 정보를 담고 있는 큰 카드로 전환되는 전환 애니메이션을 만들려고 했는데 GestureDetector를 프로필 사진과 카드 전체에 둘 다 씌우면 프로필 사진을 누를 때 둘 다 Trigger 되는 거 아닌가 걱정했는데 실험해본 결과 child widget은 parent widget에 비해 top widget으로 작동하는 것 같다. 쉽게 말해 z축 상에서 더 위에 있는 것처럼 작동한다. child widget을 클릭하면 그 touch event를 child widget이 흡수하고 parent widget에게는 event가 전달되지 않는다.

내일 할 일

• Hero widget을 통해 전환 애니메이션을 완성하고 작은 보이스 카드와 큰 보이스 카드가 유기적으로 연결되도록 해야 한다.
• 보이스 카드에 들어가는 각종 정보들을 모두 DB와 연동시킬 것이다.
• 위까지 완성되면 당겨서 새로고침 하는 기능을 넣고 본격적으로 녹음 화면을 구성한 뒤에 시험 녹음 및 로드를 해볼 것이다. 녹음하고, 보이스들을 불러오고, 우리 앱에서 가장 핵심적인 기능이다.