개발자의 블로그 임시저장 개선기: 사용자 경험을 위한 UI/UX 성찰

블로그에는 '임시저장'이라는 개념이 존재합니다. 제가 경험해본 블로그 플랫폼, 이를테면 네이버와 velog를 돌이켜 생각해보면, 각기 다른 방식으로 이 임시저장 글을 관리하고 있었습니다. 네이버 블로그는 글 작성 페이지 내 발행 버튼 옆에 저장 버튼을 두어, 모달 형태로 임시저장 글을 관리하게 했고, velog는 프로필 메뉴를 클릭했을 때 나타나는 드롭다운 메뉴에서 '임시 글'을 통해 접근하도록 UI를 제공했죠.

솔직히 말하면, 처음에는 이 '임시저장'이라는 기능이 막연히 필요하다고만 생각했습니다. 구체적으로 어떻게 구성하면 좋을지에 대한 명확한 해답이 없어, AI에게 무턱대고 맡겨 보기도 했습니다. 그러나 그 결과는 UI/UX적으로 혼란스러운 부분이 많았고, 결국 제 블로그 구조에 맞는 더 직관적인 방법을 스스로 고민하고 정리하게 됐습니다. 이 과정에서 사용자 경험을 깊이 있게 성찰하는 중요한 깨달음을 얻게 되었습니다.

기존 플랫폼 UI/UX의 한계와 저의 고민

네이버 블로그 모달 방식의 아쉬움

저는 네이버 블로그 플랫폼처럼 글 작성 페이지에서 모달 형식으로 임시저장 글을 관리하고 싶지 않았습니다. 모달은 기존 페이지보다 좁은 너비와 높이로 제공되기 때문에, 임시저장한 글 목록이 한눈에 잘 들어오지 않는다는 생각이 들었습니다. 물론 임시저장 글을 많이 두지 않는 것이 중요하겠지만, 만약 그 수가 많아진다면 무한 스크롤 방식은 넘버링 페이지네이션보다 상대적으로 불편함을 느끼게 할 수밖에 없습니다.

Velog 드롭다운 메뉴 방식의 불편함

velog의 방식에도 아쉬움이 있었습니다. 네이버 블로그의 임시저장 글 관리에 익숙했던 저는 velog에서 임시저장 글 목록에 접근할 때 다소 헤맬 수밖에 없었습니다. 임시저장 글은 최종 게시된 글보다 중요도가 낮다고 판단하여 같은 위계로 두지 않는 것이 velog의 의도였을 수 있다는 생각도 듭니다. '새 글 작성'보다 접근성이 떨어지는 드롭다운 메뉴로 배치한 것도 그런 이유일지 모르죠.

하지만 저는 다르게 생각했습니다. 임시저장 글 또한 빠른 시일 내에 잘 마무리되어 최종 게시되기를 바라는 마음이 컸습니다. 그래서 제 블로그에서는 임시저장 글 역시 '글 작성'과 동일한 위치에 배치하여 쉽게 접근할 수 있도록 하고 싶었습니다.

원본 글과 임시저장 글의 복잡한 관계: 1:1 해법

임시저장은 초안을 작성할 때에는 큰 문제가 되지 않습니다. 다만, 이미 게시된 글을 수정하다가 임시저장하는 상황에서는 복잡성이 발생합니다. 가령, 'A'라는 글을 게시하고 수정 도중 임시저장하여 'B'라는 임시저장 글이 생겼다고 가정해봅시다. 이때 다시 원본 글 'A'의 수정 페이지로 접근해 임시저장을 할 경우, 이전에 'B'가 있음에도 불구하고 또 다른 임시저장 글이 파생되어 불필요한 중복 작업이 발생할 수 있었습니다.

이러한 혼동을 막기 위해 제가 고안한 것은 원본 글과 임시저장 글을 1:1 관계로 두는 것입니다. 만약 특정 원본 글에 대한 임시저장 글이 이미 존재한다면, 사용자는 다음 두 가지 중 하나를 선택해야 합니다. 첫째, 기존의 임시저장 글을 마저 작성하여 최종 업데이트를 완료하는 방법. 둘째, 원본 글부터 다시 수정 작업을 시작하며 이전에 임시저장한 내용을 덮어쓰는 방법. 이처럼 명확한 선택지를 제공함으로써 혼란을 방지하고자 했습니다.

직관적인 사용자 경험을 위한 UI 개선

처음 AI로 만든 UI에서는 임시저장 글과 게시된 글을 별도의 페이지로 두지 않았습니다. 그 결과, 글 수정 페이지에 진입하고 나서야 임시저장 글의 존재를 확인하고, 이를 이어서 수정할지, 아니면 원본 글부터 다시 시작할지에 대한 확인 모달이 나타났습니다. 솔직히 말해, 막상 그 확인 모달을 맞닥뜨리면 원래 하려고 했던 작업이 무엇인지 당황하여 기억이 나지 않는 경우가 있었습니다. 게다가 모달에서 선택한 버튼은 번복하기 어려운 문제도 있었죠.

그래서 시스템을 개선했습니다. 수정 페이지에 진입하기 전에 이 같은 확인 절차를 거치는 것이 아니라, 게시된 글과 임시저장 글을 우선 다른 탭으로 명확하게 구분하여 보여주는 방식을 채택했습니다. 이렇게 함으로써 사용자는 수정 페이지에 들어가기 전 미리 상황을 인지하고 계획할 수 있게 되어, 불필요한 실수를 방지하고 임시저장 글을 좀 더 효율적으로 관리할 수 있게 됐습니다.

임시저장 기능에 대한 성찰: 섬세함의 중요성

결국, 데이터적인 관점에서 단순히 '임시저장된 글인지 아닌지'를 구별하는 플래그 하나만 있으면 된다고 생각했던 제 초기 판단은 다소 단순했음을 깨달았습니다. 다양한 유스케이스를 깊이 있게 들여다보니, 이 임시저장 기능이야말로 사용자의 의도와 흐름을 섬세하게 다뤄야 할 필요가 있는 기능이라는 것을 깨닫는 좋은 경험이었습니다. 이는 단지 기능 구현을 넘어, 사용자의 불편함을 최소화하고 효율성을 극대화하는 UI/UX 설계의 본질에 대해 다시 한번 생각하게 되는 계기가 되었습니다.