Product case study

네오스튜디오 웹 — 문서 작성과 협업 서비스

React와 Canvas로 문서를 작성하고 편집하며, 스마트펜 노트 앱과 입력 내용을 실시간으로 주고받을 수 있는 웹 서비스입니다.

2022.07 — 2023.04Frontend Engineer

Canvas 편집 기능 개선

Context

Canvas에서 선택한 스트로크를 이동하거나 복사한 뒤 화면 배율이나 창 크기를 바꾸면 선택 영역과 실제 위치가 어긋났습니다.

Goal

기존 선택 기능에 이동, 복사, 붙여넣기와 삭제를 더하고, 편집한 뒤에도 스트로크의 위치 정보가 맞게 유지되어야 했습니다.

What I changed

선택 영역에 완전히 포함된 스트로크만 편집 대상으로 잡고, 여러 스트로크를 한 번에 옮기거나 복사할 수 있게 했습니다.
복사, 붙여넣기, 잘라내기와 삭제 메뉴 및 단축키를 추가했습니다.
이동한 스트로크의 좌표와 경로 정보를 함께 갱신해, 확대나 창 크기 변경 뒤에도 선택 영역과 붙여넣기 위치, 지우개 판정이 어긋나지 않도록 수정했습니다.

Outcome

여러 스트로크를 함께 편집할 수 있게 됐고, 화면 배율이 바뀐 뒤 위치가 어긋나거나 옮긴 스트로크를 지울 수 없던 문제가 사라졌습니다.

Context

웹과 스마트펜 노트 앱이 같은 페이지를 편집할 때 페이지 전환이나 연결 상태에 따라 입력이 늦게 보이거나 일부 동작이 다른 순서로 처리됐습니다.

Goal

연결이 끊겼다가 다시 이어지거나 페이지가 바뀌는 중에도 입력을 차례대로 처리하는 것이 목표였습니다.

What I changed

Outcome

페이지 전환과 재접속 중 입력이 빠지거나 순서가 뒤집히던 문제가 사라졌습니다.

Context

페이지와 썸네일이 많아지면 한꺼번에 데이터를 가져오고 Canvas를 그리느라 화면이 늦게 열렸고, 화면을 옮긴 뒤에도 이전 요청이 계속 실행됐습니다.

Goal

처음 필요한 항목만 불러오고, 화면을 벗어나면 진행 중인 작업을 멈춰야 했습니다.

What I changed

Outcome

페이지가 많은 문서도 첫 화면이 빨리 열리고, 수백 장을 넘겨봐도 메모리 문제없이 동작합니다.

Context

데이터 저장 방식이 Firebase에서 자체 서버 API로 바뀌면서 기존 화면의 조회와 저장 로직을 새 응답 형식에 맞춰야 했습니다.

Goal

기존 노트와 페이지 기능을 유지하면서 데이터 요청과 화면 상태 처리를 바꾸는 것이 조건이었습니다.

What I changed

Outcome

서버가 바뀐 뒤에도 사용자는 기존 노트와 페이지를 그대로 썼고, 요청 실패나 토큰 만료가 화면 전체 오류로 번지지 않게 됐습니다.