수많은 앱이 출시되고 사라지는 IT 환경에서 앱들은 살아남고 사용자분들에게 사랑받을 수 있도록 앱의 성격에 따라 더 눈에 뜨이도록 발전하거나 조금 더 편하게 사용할 수 있도록 발전해가고 있습니다.
이번에 출시한 한쇼 2022에서 새롭게 추가된 “편집 화면 나누기” 기능을 통해 사용자의 문서 편집 편의성을 높이고자 하였습니다.
1. “편집 화면 나누기” 기능이란?
하나의 편집 뷰를 2/4분할로 나누어, 여러 페이지를 동시에 편집할 수 있는 기능입니다.
문서를 작성하다 보면, 다른 페이지에 작성한 내용을 참고해야 하는 경우가 빈번하게 발생합니다. 이럴 경우, 현재 작업 중인 페이지 편집을 멈추고, 참고하고자 하는 페이지로 이동하여 확인한 후, 다시 편집 중인 페이지로 이동하는 여러 과정을 거치게 됩니다. 또한, 참고 페이지를 지속적으로 확인하기 위해, 위의 과정을 반복하는 문제점이 있습니다.
이와 같은 ”편집하면서 다른 페이지를 볼 수 없다.”라는 불편한 사용성을 해결하기 위하여 사용자가 필요할 때 편집 화면을 여러 개로 나누어 여러 페이지를 동시에 확인하고 편집할 수 있게 하여 사용자들이 편하게 문서를 생성할 수 있도록 도와주는 편의 기능을 추가하였습니다.
아래의 그림과 같이 “편집 화면 나누기” 메뉴를 통해, 편집 화면을 “가로로 나누기”, “세로로 나누기”, “가로세로 나누기”를 할 수 있습니다. 편집 중인 페이지를 시인성을 높이기 위해, 테두리 표시를 다르게 하였습니다.
2. 왜 “편집 화면 나누기” 기능인가?
디스플레이는 더 넓은 화면, 더 높은 해상도를 추구하며 발전하고 있습니다. 이에 따라 PC 사용자들의 모니터들은 과거보다 더 넓어졌고 이는 같은 앱을 사용하였을 때 이전보다 더 크게 볼 수 있다는 말이기도 하지만, 기존과 같이 공간을 사용하게 되면 그만큼 여백 공간이 넓어진다는 의미기도 합니다.
한쇼에서는 이러한 여백 공간들을 ”편집하면서 다른 페이지를 볼 수 없다.“라는 문제를 해결할 수 있는 유용한 공간으로 활용하였습니다.
3. 왜 에디터 영역만 나누었는가?
디스플레이가 넓어졌지만 나누어 표시하는 뷰들이 많아지면 반대로 사용자들의 편집하는 영역이 작아져 오히려 사용성이 떨어질 수 있습니다.
따라서 선택과 집중이 필요하였고 우리는 한쇼의 여러 뷰 중에서 뷰를 나누었을 때 활용도가 가장 높은 에디터 뷰를 선택하여 집중적으로 화면 나누기 기능을 추가했습니다.
4. 하나의 뷰에서 여러 개의 뷰로
”편집 화면 나누기“ 기능을 추가하는 것은 겉보기에는 단순하게 기존에 있던 에디터 뷰를 복사하여 붙여넣는 단순한 작업으로 보이나 내부적으로 보면 기존에 단일 뷰일 때 개발되었던 앱의 구조 변경이 필요하였습니다.
모델/뷰가 구조적으로 분리된(MVC나 MVVM) 구조로 만들어진 앱의 경우 이러한 구조 변경을 최소화할 수 있지만, 앱의 크기가 크고 여러 뷰 간의 상관관계를 가지고 있어, 유의해서 처리해야 할 부분이 많았으며, 편집 뷰 관리 방식에 대한 변경이 필요하였습니다. 대표적인 예로 뷰들이 서로 영향을 주는 경우 이에 대한 별도의 조치가 필요했습니다.
5. 서로 다른 뷰 간의 연동성 변화
기존에는 편집 중인 페이지의 모델을 기준으로 미리보기 뷰 – 에디터 뷰 – 노트 뷰가 동작하도록 설계되어 있었고, 이에 따라, 미리보기 뷰나 에디터 뷰에서 편집 중인 페이지를 변경(페이지 이동, 편집 등)할 때, 모델이 변경되며, 변경된 모델을 기준으로 참조하는 뷰들이 업데이트됩니다.
즉, 모델과 뷰가 분리되어있다고 생각한다면 작업 페이지 정보를 모델로 생각하면 기존에 뷰들이 연동되는 동작(미리보기 뷰의 슬라이드를 선택을 통한 작업 페이지 변경, 에디터 뷰의 콘텐츠 변경 및 페이지 이동 등)이 모두 뷰들의 공통적인 모델이 작업 페이지가 변경되는 것이기 때문에 같은 모델을 공유하는 다른 뷰들이 자연스럽게 연동되도록 구현되어 있었습니다. (물론 설명을 위해 단순화하여 말한 것이고 실제 구조는 훨씬 복잡합니다.)
편집 화면 나누기 기능을 위해서는 편집 뷰가 추가되었으며, 모델과 뷰 간의 구조 개선이 필요로 하였습니다. 편집 뷰가 늘어남에 따라 각 편집 뷰가 서로 다른 페이지를 나타낼 수 있게 되고 현재 활성화된 편집 뷰만 미리보기 뷰와 노트 뷰가 연동되어야 하며 에디터 뷰 간에 활성화 상태도 변경될 수 있어야 하는 등 기존과 달리 고려해야 할 사항이 많아졌습니다.
이를 일일이 대응하면 코드가 복잡해지고 그러면 버그가 발생할 여지가 많아지기 때문에 최대한 단순한 구조로 이를 처리할 수 있도록 뷰 모델을 관리하는 매니저를 추가하고 매니저는 에디터 뷰와 다른 뷰를 별도로 분리해서 관리하도록 하여 최대한 단순한 구조로 기존의 뷰 간의 연동성을 유지하도록 개발하였습니다.
6. 향후 발전 방향
기존의 구조를 변경하는 작업의 경우 일반적인 새로운 기능의 추가보다 앱의 안정성을 낮출 위험성이 있는 작업입니다. 그런데도 이러한 기능을 추가한 이유는 이 기능이 들어가면 사용자분들이 문서 편집을 할 때 좀 더 편하고 유용하다 생각하여 기획되고 추가한 기능입니다. 이처럼 더 많은 사람이 한쇼를 쉽게 사용할 수 있게 하는 기능들을 지속해서 추가하고 다듬음으로써 한쇼가 더 많은 사랑을 받을 수 있도록 노력하겠습니다.
이에 대한 일환으로써 새롭게 추가된 ”편집 화면 나누기“ 기능의 경우에도 현재 상태로 만족하는 것이 아니라 사용자분들에게 조금 더 유용한 기능으로 만들기 위해 앞으로도 더 고도화되고 안정성을 다듬기 위해서 분할된 뷰 간의 콘텐츠 객체의 Drag & Drop 기능을 추가할 예정입니다.
더 많은 발전을 거듭하여 한쇼가 앞으로도 많은 분께 오랫동안 잊히지 않고 사랑받을 수 있도록 노력하겠습니다.