TIL | UX, DevEx 개선을 위한 수고로움

들어가며

---

  내가 회사에서 만드는 서비스는 백오피스에 해당한다. 백오피스 서비스에는 그다지 큰 기술이 들어가지는 않는다. 따라서 사용자는 적은 기능으로 만들어진 시스템을 사용하기에 불편함을 느낄 수밖에 없다. 가끔 사용자 경험이 무조건 개선되어야 하는 경우가 나타날 때가 있다. 이땐 추가적인 요구사항으로써 서비스를 개선해주고 있다.
  우리 서비스를 이용하는 고객은 서비스를 이용함으로써 초 단위로 전력 관련 데이터를 체크하는 수고를 덜어낸다. 상당히 많은 데이터를 다루기에, 데이터 입력/출력에 혼선이 생길 수도 있다. 그래서 우리 시스템이 백오피스 사용자를 위한 경험을 조금이나마 향상해서 제공한다면 휴먼 에러를 줄이는 데 도움을 줄 것이라 본다.
  UX(User Experience)와 같은 맥락으로 DevEx(Developer Experience)를 개선하는 작업이 필요함을 느꼈다. 개발자의 개발 경험을 높여주는 것이다. 최소한의 개발 환경에서도 개발이 가능하지만, 더 개발자스러운 작업 환경에서 업무를 보는 경우는 더없이 좋다. 이런 경우에는 개발자의 개발 능력치를 더 끌어올릴 수 있지 않을까 싶다.  따라서 내가 UX 및 DevEx를 개선한 혹은 앞으로 개선할 기능에 대하여 정리해보고자 한다.

 

1. UX 개선을 위해

---

1) 사용자 경험(UX)을 개선한다는 것은 현재 페이지에서 사용자가 불편함을 느끼지 않게 하는 것이다. UX를 고려해야 하는 페이지는 모든 페이지에 해당하지만, 내가 develop 할 사용자가 변경한 데이터를 실시간으로 확인하는 기능을 추가해야 하는 페이지는 한정되어 있다. 
 
2) 아이디어는 우아한 형제들 기술블로그를 통해 얻었다. https://techblog.woowahan.com/10145/

만드는 사람이 수고로운 UX 개발기 | 우아한형제들 기술블로그

 
3) 사용자가 사용자 정보를 수정하는 페이지에서 어떤 내용이 변경되었는지를 시각적으로 체크할 수 있다.

const isEditing = () => { return !equal( JSON.stringify(data), JSON.stringify(checkData) }

위 코드는 우아한 형제들 기술 블로그에서 발췌한 코드로, 다음과 같은 내용이다. 현재 편집된 내용이 있는지 여부를 확인하는 것이다. 현재 작성 중인 데이터인 data와 Backend에 요청한 데이터인 checkData를 비교하여 동일한지에 대한 여부를 isEditing에 반환한다. 
변경 내용이 있는데 저장 없이 다른 탭으로 이동할 경우에는 동기적인 방식으로 다음과 같은 dialog를 띄운 후 사용자의 응답을 기다려서 변경한 내용에 대한 처리를 확인받는다. 다음 코드도 우아한 형제들 기술 블로그에서 발췌하였다.

const onCloseModal = async () => {
    if(isEditing()) {
    const isClose = await new Dialog().confirm(
        `탭을 이동하시겠습니까?`, `변경 사항이 저장되지 않습니다.`
    )
    if (isClose) {
        onCancel()
    return
    }
    onCancel()
}

사용자는 무엇이 변경되었는지를 알 수도 있고, 모를 수도 있다. 그런데 UX를 향상할만한 코드를 추가시켜서 사용자 경험에 좀 더 나은 경험을 제공해 준다면, 사용자가 서비스 이용에 좀 더 편리함을 느끼지 않을까 싶다.

 

 

2. DevEx 개선을 위한 작업

---

DX 정의 | Developer Experience (DevEx)

https://microsoft.github.io/code-with-engineering-playbook/developer-experience/

Developer Experience (DevEx) - Code With Engineering Playbook

 

Build - Test - Start - Debug

개발자(나)의 개발 경험 개선을 위해 내가 한 일은 다음과 같다.
1) 프로젝트와 관련한 메커니즘 정리, 설계 문서 작성, 프로젝트 개발 환경 세팅(Git 프로젝트 세팅)
2) 테스트 환경 구성 | 단위 테스트 코드 작성 및 통합 테스트 환경 구축(할 일)
3) 협업 툴(slack, notion)을 활용한 API 및 프로젝트 진행 상황을 체크할 수 있는 환경 구축
4) 디버깅 환경 세팅
이 밖에도 개발자의 개발 경험 개선을 위한 방법들이 다양하게 존재한다. 특히 회사 차원에서는 시간/공간에 구애받지 않는 근무 환경을 제공해 주는 것이 있다. 어쨌든 위와 같은 요소를 통해 DX가 긍정적으로 개선되지 않을까 싶다.
나의 개발 경험 향상을 위해서 내가 노력해야 하는 현실이 웃프지만, 노력하다 보면 뭐 주변 환경이 달라질 것이라 본다.