사용성 개선 개발 경험 회고 (내 코드 불러오기)

안녕하세요. 👋🏻

구름에서 풀스택 개발을 하고 있는 Kenny입니다 :)

 

이번 포스팅에선 프론트엔드 개발자로서 자발적으로 사용성 개선을 위해 개발한 경험에 대해 회고해보려 합니다.

 

제가 개발한 기능은 구름 LEVEL(이하 레벨) 서비스에서 QnA를 작성할 때 누를 수 있는 내 코드 불러오기를 활용할 수 있는 버튼인데요.

위 기능은 꾸준히 제품을 개발해 오며, 언젠가는 꼭 개선하겠다는 다짐을 토대로 시작되었습니다.

누구의 기획도 없이(물론 팀들은 알고 있었습니다) 온전히 남는 시간에 틈틈히 사용성 개선을 위해 개발한 거라 더욱더 애정이 있는 것 같네요. 😎

 

구름 LEVEL 시험실 QnA

왜 개발 했나요?

제가 위 기능을 꼭 개선해야겠다고 다짐한 건 아래의 이유 때문이었습니다.

 

1. QnA를 작성하는 에디터에 코드 버튼이 있고, placeholder로 힌트를 지정해 줬지만 사용자들이 알아차리기 어렵습니다.

2. 설령 코드 버튼을 눌러 작성한다고 쳐도, 본인이 작성한 언어(C++, JS, ...) 등등의 코드 하이라이팅이 되지 않았습니다.

3. 코드 버튼을 눌러도 작성된 QnA에서 코드 라인이 보이지 않아 가독성이 좋지 않았습니다.

3. 알고리즘 크리에이터분들께서 답변을 다실 때 코드를 잘 알아보기가 힘들어 답변이 힘들다는 페인 포인트가 있었습니다. (아마 유저도 마찬가지였겠죠)

4. 1, 2, 3번의 결과물로 아래의 QnA들이 잔뜩 쌓이며, QnA 페이지의 품질이 낮아져 유저들에게 좋은 경험을 주지 못할 것 같았습니다.

 

에디터 코드(</>) 버튼을 활용하지 못한 예시

코드를 활용했지만, 하이라이팅이 되지 않았음(기존엔 옆에 코드 라인도 없었습니다)

이제 개발할 동기는 충분했고, 늘 작성해 오던 코드로 개발을 시작하면 됐습니다.

 

그러나 개발을 하며 여러 문제에 직면했습니다 🌊

레거시 코드 이해

저 조그마한 기능들에 수많은 라이브러리가 겹쳐있었습니다. (총 3개...)

코드를 이해하는데도 시간을 좀 할애한 것 같아요.

또한, mount 되는 시점들이 핏이 다 안 맞아서 버튼을 눌러도 최신화가 안 되는 문제도 직면했으며,

이는 공식문서들에도 나오지 않아 (당연히 안 나오겠죠..... 서로 다른 라이브러리 3개가 겹쳐있으니 🥲) 많이 복잡하다고 느낀 것 같습니다.

라이브러리는 모든 걸 제공해주지 않아

언어 하이라이팅을 개발하는 과정에서 사용하는 라이브러리 등에서 작성한 언어를 추출할 수 있는 기능을 보통 지원해주지 않습니다.

처음엔 각 언어에 해당하는 작성 플로우에 대해 ChatGPT와 함께 고민하며 추출을 진행했는데요.

정확도가 높긴 했지만, 100%가 아니기에 이는 소프트웨어의 품질에 영향을 줄 수 있다고 판단했습니다.

결국 시험실에서 전역 상태를 활용해 언어를 추출해 왔고, 이를 토대로 하이라이팅을 진행하려 했지만
라이브러리에서 언어를 넣어준다고 바로 하이라이팅을 지원해주지 않았습니다.

충분히 고민한 결과 라이브러리에서 언어를 추가해 줄 수 없다고 판단했으며, 

마크다운에서 각 언어에 대해 하이라이팅이 되도록 구현했습니다.

이를 통해 레벨에서 지원하는 20개가 넘는 모든 언어에 대한 모든 대응이 가능해졌습니다.

 

QnA를 사용하는 모든 경우에 대해 정상동작하도록 50줄 정도 되는 함수를 짜는데만 하루정도 걸린 것 같아요. 😇 

물론 버튼을 난사하게 되면 버그는 있지만, 사용자는 해당 버튼을 보통 한 번이나 두 번 정도만 누를 거라 판단했습니다.

코드 라인 개발

이제 코드 라인을 개발할 차례입니다. 이는 간단한 줄 알았지만, 기본 제공된 디자인을 수정하는 건 간단하지 않더라고요.

결국 라이브러리에서 한 줄 한 줄 html을 파싱 하는 과정에서 디자인을 함께 넣어주어 해결했습니다.

좋은 방법은 아닌 것 같지만, 일정을 맞춰야 됐고, 다른 많은 기능들에 대한 우선순위가 있어 어쩔 수 없었던 것 같아요.

버그!

버그가 정말 많았습니다. 레벨 QnA에서 질문을 수정하면 마크다운이 풀리는 문제도 있었고, 본인이 선택한 Line에서 코드를 추가해 주기 때문에 코드 라인 안에서 버튼을 누르면 코드 뷰가 조금 망가지는 문제가 있었습니다.

 

그래도 해결할 수 있는 부분 (유저가 충분히 버그라고 느낄 수 있는 부분)들에 대해선 모두 해결했습니다 🥳

위 기능에 대해 사용자들은 과연 모두 사용할까?

제가 예측한 건 본인이 작성한 코드를 삽입한다는 가정하에 100% 였습니다.

일단 버튼이 너무 잘 보이게 시안을 만들어 주셨고, 뭔가 누르고 싶게 생겼잖아요.

 

실제로 대부분의 사용자들은 모두 아래와 같이 사용을 했습니다. 사용성이 훨씬 낫죠?

사용한 사례

모두 사용!

https://level.goorm.io/l/qna에서 확인해 보면 현재 구름톤 챌린지가 진행되는 동안 많은 QnA들이 올라오고 있는데, 다들 많이 사용하는 걸 볼 수 있습니다.

 

주니어로서 만든 기능에 대해 사용자들이 활용해 주시는 경험이 소중해 회고를 진행한 것 같습니다.

앞으로 커리어에서도 사용성 및 사용성 개선에 대해 크게 신경 쓰며 개발을 진행하게 될 텐데 저는 이 부분이 잘 맞는 것 같네요!

긴 글 읽어주셔셔 감사합니다. 🙇🏻