ShowYourTime에 3:4 비율 기능을 다시 도입하며

안녕하세요, `ShowYourTime`을 개발하고 있는 `w0nder`입니다. 이번 포스팅에서는 저희 앱에 4:3 비율 기능을 다시 추가하면서 개선한 내용을 공유하고자 합니다. <video url="/posts/4/assets/intro-ratio.mp4" title="비율변경 기능 소개"></video> *4:3비율* ShowYourTime에는 원래 4:3 비율 기능이 있었지만, 레이아웃과 여러 영역 조정 문제로 인해 잠시 기능을 제거한 적이 있습니다. 그런데 기능을 제거하자마자 앱 리뷰에서 사라져서 아쉽다는 유저 의견이 있었고, 이를 계기로 다시 도입을 고민하게 되었습니다.  *좋은 어플, 예쁜 타임 스탬프!* ## 비율을 바꾸면 화면이 울렁거려요. 이번 업데이트에서는 기존 기능을 단순히 복원하는 것에 그치지 않고, 사용자 경험을 향상시키기 위해 다양한 개선 사항을 함께 적용했습니다. 그 중에서도 가장 중점적으로 다룬 부분은 비율 변경 시 발생하던 화면 흔들림 문제를 해결하는 것이었습니다. <video url="/posts/4/assets/shake.mp4" title="비율 변경시 화면 울렁거림"></video> *아 안돼* 기존에는 비율을 변경할 때마다 카메라 영역의 크기 자체를 조정하는 방식을 사용했습니다. 이 방식은 비율 변경 시 카메라가 초기화되면서 초점을 다시 맞추는 과정을 거치게 됩니다. 이로 인해 사용자가 화면을 보고 있을 때 갑작스러운 흔들림이 발생하여 시각적으로 불편함을 느낄 수 있었습니다. 이 문제를 개선하기 위해 새로운 접근 방식을 택했습니다. 먼저 카메라 영역을 4:3 비율로 고정하고, 그 위에 검은색 레이어를 겹쳐 놓았습니다. 이 검은색 영역은 마치 사진에 검은 테이프를 붙여놓은 것처럼 카메라 화면의 위아래를 가립니다. 비율 변경 시에는 검은색 레이어의 높이를 조절하여 보이는 카메라 영역의 비율을 변경하는 방식을 사용했습니다. 예를 들어 1:1 비율로 변경할 때는 검은색 레이어를 상하로 늘려 중앙에 정사각형 모양의 카메라 영역이 보이도록 하고, 4:3 비율로 변경할 때는 검은색 레이어를 상하로 축소하여 전체 카메라 영역을 노출시킵니다.  *UI 해부* 이렇게 함으로써 카메라 영역 자체는 변하지 않고 일정하게 유지되면서도, 사용자에게는 마치 카메라 영역의 비율이 변경되는 것처럼 보이게 됩니다. 이 방법을 통해 비율 전환 시 화면의 요동 없이 자연스럽고 부드러운 변화를 구현할 수 있게 되었습니다. ## Round도 문제였습니다. 앞서 설명한 비율 변경 시 카메라 영역의 크기를 직접 조정하는 대신 영상의 비율을 조절하는 방식으로 변경하면서, 기존에 사용하던 방식인 border를 통한 모서리의 라운드 효과를 적용할 수 없게 되었습니다.  *Round 는 여기 입니다.* 사진 촬영 시 모서리에 라운드 처리를 적용하는 옵션이 있었지만, 사용자가 많지 않았고 콜라주 기능을 사용할 때 어색해 보여서 이전에 제거했던 기능이었습니다. 그러나 실수로 UI에는 여전히 해당 옵션이 남아있는 상태였습니다. 이에 대해 디자이너인 나나산님께 의견을 구했더니, 이 기능이 'UI의 시적 허용'이라고 표현하시면서 다른 앱과의 차별점이라고 하셨습니다. 이에 힘을 얻어 모서리 라운드 처리를 다시 구현해 보기로 결정했습니다. 기존의 border를 사용한 방식 대신, 모서리에 라운드 처리된 검은색 SVG(Scalable Vector Graphics)를 카메라 영역 위에 겹쳐 올리는 방식으로 구현했습니다. SVG는 벡터 그래픽 형식으로, 이미지를 확대하거나 축소해도 선명도가 유지되는 장점이 있습니다. 먼저, 라운드 처리된 모서리 부분만 검은색으로 처리한 투명 SVG 파일을 준비했습니다. 그리고 카메라 영역 위에 이 SVG 파일을 화면의 각 모서리에 겹쳐 올림으로써, 마치 카메라 영역의 모서리가 라운드 처리된 것처럼 보이게 했습니다. 이러한 방식을 통해 비율 변경으로 인한 카메라 영역의 크기 변화에 상관없이 일관된 모서리 라운드 효과를 유지할 수 있게 되었습니다. ## 결론 비록 복잡해 보이는 구현 방식이지만, 사용자에게는 더 나은 경험을 제공할 수 있게 되어 뿌듯합니다. 개발 과정에서 여러 요구사항을 구현하다 보면 불가능해 보이거나 막막할 때가 있지만, 다른 시각으로 고민하다 보면 항상 해결 방법이 있다는 것을 깨닫게 되었습니다. 문제를 바라보는 관점을 조금씩 바꿔가며 실마리를 찾아가는 과정에서 개발자로서의 즐거움을 느끼고 있습니다. ShowYourTime은 개발 과정에서 더 나은 사용자 경험을 제공하기 위해 노력하고 있습니다. 앞으로도 사용자 여러분의 소중한 의견에 귀 기울이며, 끊임없는 개선과 혁신을 통해 여러분의 시간을 더욱 가치 있게 만들어줄 수 있는 ShowYourTime이 되도록 노력하겠습니다. <link-preview url="https://showyourti.me" title="Show Your Time" target="_blank" image="https://www.showyourti.me/images/og.png"></link-preview>