[화이트보드 동시편집 프로젝트] 4. 마무리

그마지막으로 소소하게 배운 점과 하고 싶은 일들을 남겨두려한다.

 

웹 접근성

웹 접근성과 인클루시브 디자인에 대해서 처음 배웠다.

여러가지 차이점을 없애고 모두가 같이 편하게 사용할 수 있도록 만드는 디자인은 정말 가치있는 일이라는 생각이 든다.

또, 수많은 태그들이 모두 이런 접근성에 기여한다는 점이 신기했다.

오직 div로만 모든 걸 만들었던 과거를 좀 반성하고 있다.

 

크로스 브라우져 / 기기 호환성

제일 걱정했던 부분인데 생각보다 로직은 멀쩡했고 css가 소소하게 깨져서 귀찮았을 뿐 할 말했다.

 

하지만, apple 제품들과 safari는 정말 힘들었다.

iOS 정책 때문에 안 된적도 많았고, 아직도 모르겠는 사파리 이슈가 있다.

그리고 두 개 겹쳐지니 뭐가 문제인지 찾는 것도 진짜 힘들었다.

 

하고 싶은 일들

 

도전과제1 : 피그마 따라하기

 

만들면서 제일 걱정된 거는 역시 성능이다.

그리고 답은 항상 피그마가 주었다.

 

Q. 동시 편집의 성능을 더 높일 수 있을까?

A. 현재 모든 걸 프론트에서 webRTC형태로 공유하는데, 이 부분을 서버와 나누면 성능이 좋아질 것이다. 즉, CRDT와 OT를 섞어서 사용해봐!

피그마의 OT 처리 로직 일

 

 

Q. 캔버스 데이터 로드를 어떻게 하면 더 빠르게 할 수 있을까?

A. WebAssembly를 사용해봐 3배 빨라져.(일부 브라우져만 지원) 

A2. 우리는 C++로 코드를 작성중이야

3배 빨라진 피그마

 

Q. 편의성을 올리고 싶어 어떻게 할까? 특히, 여러 유저가 사용하는 부분과 관련해서

A. 모든 객체에 생성자의 아이디를 같이 저장한 뒤, 이를 기반으로 권한의 우선순위를 부여해봐!

A2, A3, A4 ..... 이하 생략

 

도전과제2 : 이미지 최적화하기

다른 부분도 그렇지만, 이미지는 굉장히 어려운 주제였다.

이미지가 고화질로 들어가면 확실하게 성능이 느려진다. 로딩에서는 이게 눈에 보인다.

 

그러면 어떻게 해야할까? 이 부분은 정말 답이 많다.

라이브러리나 cdn 서버 사용해도 되고, 압축을 해도 된다.

 

일단 webP로 전환을 해서 저장하니 75%정도 성능이 좋아졌다. 

퀄리티를 낮추니 85%까지 올라갔는데 화질차이가 눈에 보여서 다시 복구했다.

여러가지 시도가 필요한 상태이다.

 

또한, 이미지를 현재는 한 번에 저장하고 불러오는 중이다.

이미지를 불러오는 부분을 나누면 어떨까 여러 고민을 진행중이다. 

 

도전과제3 : 프론트 에러 로깅

센트리 붙이려했는데, 사업 제약이 붙어서 못 붙였다... 그게 아쉽다.

 

도전과제4 : 테스트 코드로 안정성 확보하기

이것도 여러 사정이 겹쳐서 못했다. 근데, 반복되는 에러가 생각보다 많다.

에러는 잘 찾지만, 에러를 계속 수정하는 건... 귀찮다..

테스트코드를 넣어서 안정성을 더 확보하고 싶다.

---

아쉬운 점은 SI 사업인 점이다.

열심히 했고 발전할 부분이 정말 많은데 이제는 내 손을 떠나서 함부로 위 내용들을 넣을 수 없다...

 

아쉽다.

정말 하고 싶은 것들은 스스로 제어권을 가지고 하는 게 날 지도 모르겠다.

 

어쨌든 길었던 회고의 끝이다.