고양국제고

GGHS Time Table 5 개발 스토리 #5: 마지막 대격변

카루-R 2022. 3. 2. 16:03
반응형

환영합니다, Rolling Ress의 카루입니다.

임시시간표가 나왔습니다. 바로 GTT를 만들어야지요. GTT가 진짜 시간표가 되는 순간입니다. 하필 제가 코로나 검사를 받는 도중에 떠가지고, 집에 가자마자 바로 만들었습니다. 그나마 다행인 건 제가 예전엔 한글 파일을 직접 보면서 하나하나 입력하는(...) 노가다를 거쳤는데, 지금은 엑셀과 C# 으로 어느 정도 반 자동화를 해두었습니다.

캬... 이제 이 코드를 긁어다가 원래 GTT에 붙여넣으면 됩니다. 그렇게, 드디어 GTT 5의 RC 버전이 모습을 드러냈습니다.

자, 이게 GTT 5 RC 2.1입니다. Relase Candidate가 붙은 이유는, 이 뒤에 정말 큰 변화가 일어났기 때문입니다. 지금 버전은 조금 달라요. 여하튼, 이때는 아크릴 테마를 탑재했기 때문에 뒷배경이 비치는 게 보이죠. 마치 불투명한 유리 같은 느낌입니다. 이게, 다 좋은데 호불호가 있을 수 있단 말이에요. 그래서 갈아엎기로 했습니다. 뭘로? Mica로. Windows 11의 테마가 미카 테마입니다.

오죽 큰일이었으면 제가 그 안 하던 git commit push를 하고 있었을지..ㅋㅋㅋㅋㅋㅋ 대대적인 작업 전에는 항상 상태를 보존하는 습관을 들입시다. 잘못된 저장이 오히려 자료를 망칠 수 있어요.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls" muxc:BackdropMaterial.ApplyToRootOrPageBackground="True"

미카는 오히려 다루기 쉬워요. MainPage.xaml 파일에서 <Page> 헤더 안에 해당 내용을 넣어주면 됩니다. 저는 NavigationView를 통해 탐색을 하기 때문에, 이렇게 하면 전역적으로 미카 테마가 적용됩니다.

전체적으로 배경이 밝아졌어요. 그리고 버튼들도 깔끔하게 흰색으로 처리했습니다. 조약돌 느낌도 나는 것 같고. 그리고, 상단이 많이 바뀌었어요. 로고를 추가했고, 상단바 구분을 없앴습니다.

 
 

차이가 보이시나요? 왼쪽이 Acrylic 시절, 오른쪽이 Mica입니다. 예전에는 네비게이션 바 (툴바라고 보시면 됩니다)가 본문과 색이 똑같았고, 제목 부분과 색이 달랐지만 지금은 네비게이션 바와 제목 부분의 테마가 같아졌습니다. 본문과 구분감을 두면서 깔끔함을 높였죠.

 
 

왼쪽이 아크릴 테마, 오른쪽이 미카 테마입니다. 왼쪽은 투명도가 높아서 뒤가 훤히 비쳐보이죠. 오른쪽은 은은한 푸른 느낌만 있습니다. 참고로 왼쪽 같은 경우 "바로 뒤에 있는 창" 색상의 영향을 받지만, 오른쪽의 경우 "배경화면" 사진에 영향을 받습니다. 오히려 후자가 더 좋을 수도 있겠어요. 무엇보다, 깔끔합니다. 왼쪽은.. 지금 보니 왜 저렇게 산만한 걸까요.

 
 
 
 

아이콘도 조금씩 바뀌었어요. 이건 폰트 탓인데, 기존의 Segoe MDL2 Assets 폰트가 아니라 Segoe Fluent Font를 사용했습니다. 조금 더 둥글둥글해졌죠. 보기도 더 편한 것 같아요.

 
 

Todo 페이지도 Add New, Delete 등 버튼의 위치를 다른 페이지처럼 오른쪽에 몰아넣었습니다. 통일성을 위해서요. 때문에 항목별 우측에 있던 '>' 아이콘도 '^'로 바뀌었습니다. 이런 세심함이 UX를 증진시킵니다. 여하튼, 디자인도 적당히 손봐서 좌우 여백 55, 하단 여백 35를 칼같이 지킵니다.

 
 

그리고 미카 테마로 바뀌면서, 다크 테마가 개선되었습니다. 사실 GTT 1, 2시절에는 그 자체가 다크모드였죠. 그러다 GTT 3에서 다크모드가 생겼고, GTT 4에서 유지가 되긴 했는데 사실상 반쪽짜리 다크모드였어요. 제목하고 상단바가 적용이 안 됐거든요. 미카 테마로 바꾸면서 다행히 방법을 찾았고, 다시 다크모드가 핵심 기능으로 자리잡게 됩니다.

 
 

왼쪽은 RC1이긴 한데, 사실상 디자인 자체는 4와 다를 게 없어요. 본격적으로 바뀐 건 RC 2니까. 여하튼, 지금 보시면 단순한 투명도 차이를 넘어서, 왼쪽의 경우 제목표시줄과 상단바는 2중으로 분리가 된 걸 볼 수 있죠. ㅋㅋㅋㅋㅋ저걸 저대로 출시했으니..어휴. 아무도 다크모드는 쓰지 않았을 것 같아요.

 
 

그리고 보이지 않는 곳까지 모두 다크 테마 적용을 했습니다. 아까도 말했지만, 이런 사소한 부분이 모여서 전체 프로그램에 대한 사용자 경험을 결정하는 겁니다. 아주 중요해요.

그런데 그걸 모르고 있는 회사들이 너무나도 많단 말이죠.

고등학생도 아는 당연한 상식을.


여하튼, 대부분의 버그는 잡혔고 이제 배포만 남았습니다! 그동안 GTT 발전 과정을 봐주셔서 감사드려요 :)

반응형