디자인 부채를 처음 겪어본 사람의 이야기
글을 쓰기 전 물심양면으로 도와준 날개 없는 천사 FE 개발자 정홍섭 님께 감사를 올리겠다.
지난주, 4월 25일 부산소프트웨어마이스터고등학교 입학전형 플랫폼 '마루'를 모 자사고에서도 사용하기로 결정했다.
말만 들으면 진짜 축하할 일이고, 지난 운영 때 얻은 VoC를 통해 디자인을 수정할 수 있는 절호의 기회이기도 하다.
나도 그렇게 생각하고 "아싸 완전 좋은 기회니까 하면 좋겠지?"하고 덥석 기회를 잡았다.
그런데, 막상 시작하고 보니 '디자인 부채(Design Debt)'를 해결해야하는 것을 깨달았다.
사실 예전부터 디자인 부채가 있는 것을 알고있었음에도 불구하고 귀찮음 때문에 청산하지 않았는데,
3학년이 되니 2학년 후배에게 인수인계 해줘야하기도 하고, 자사고에 납품도 해야 하니 이참에 청산해야겠다고 마음먹게 되었다.
일단 피그마에 들어가서 가장 먼저 해결하려고 했던건 다음과 같다.
1. 각 페이지가 퍼져있는 것을 카테고리와 플로우에 맞게 정리
- 플로우를 지금 정의를 제대로 하지 않으면 후배에게 인수인계하기 어려울 거 같았다. 이미 인수인계를 하고 있기는 한데, 저번에는 궁금한 걸 잘 안 물어본 후배가 막상 내가 물어보니 정말 많이 말했다.
2. 개발상과 디자인 상의 다른 텍스트, 간격 등을 일치하게 바꾸기
- 개발이 재빠르게 진행되고, 디자인과 일치하는지에 대한 검증이 유야무야 진행되었기에 맞지 않는 부분이 은근히 많았다.
이제 본격적으로 청산한 부채들에 대해 알아보자.
수정 1_접수증 다운로드(VoC수정)
아직 반영하지 않은 VoC를 반영하는 것부터 시작했다.
마루를 사용한 입학자를 대상으로 한 설문 조사에서 위와 같은 의견이 나왔다. 입학 등록 및 기타에 필요한 번호를 알 수 없어서 아쉬웠다. 라는 의견인데 이건 원서 최종 제출 후 원서 관리 탭에서 다운로드 받을 수 있는 접수증에서 접수번호, 즉 입학 등록 및 기타에 필요한 번호를 얻을 수 있다.
이를 몰랐다는 것은 접수증을 다운로드 받지 않았다는 말이 된다.
(접수증은 혹시나 원서가 누락돼서 서버에 안 올라와있거나 검토가 안 됐을 경우를 대비해서 존재함)
이를 해결하기 위해 입학 원서를 최종 제출하고 나면 홈으로 돌아가기 버튼이 나오던 걸 접수증 다운로드를 강제하고, 원서의 상태를 알 수 있는 원서 관리 페이지로 리다이렉트 시킨다.
수정2_상태 별 UI 변경되는데, 개발 상과 다름
원서 관리는 원서의 상태별로 UI가 변경되는데, 처음엔 디자인과 상태 별로 달라지는 UI를 텍스트로 설명한 줄글이 따로 있어서 이걸 텍스트와 디자인이 함께 있도록 수정했다. (그게 위의 사진)
그런데 이게 개발상과 달랐다. 개발상과 디자인상이 각 상태별로 다른 UI로 되어있어서, 이미 운영된 버전인 개발상에 맞추어서 디자인을 바꾸었다.
수정3_개발상의 alert메시지가 디자인 상에서 표시되지 않아 있음
원서 관리에는 우측에 있는 원서 작성 이어서 하기, 내 원서 확인하기, 내 접수증 확인하기 버튼이 있다. 원서 접수 ~ 1차 합격 발표 전까지 표시되는 화면이기에 되게 포괄적으로 디자인을 해놓았다. 그에 따라서 원서의 상태 별로 각자의 버튼이 Alert로 막혀야 하는데 이를 작년에는 디자인 당시 표기해놓지 않아서 개발자가 자발적으로 문장을 작성해야 했다.
이를 발견하고 나서는 개발상에 있는 Alert 메시지를 보고 수정했다. 수정 후에는 디자인상에도 코멘트로 남겨놓았다.
수정 4_개발상에는 있지만 디자인상에는 없는 컴포넌트 만들기
유독 마루가 빠르게 진행돼서 그런지 피드백 때 받은 개선 요구사항을 반영한 수정 사항이나 개발자가 스스로 바꾸고 디자이너에게 말하지 않은 것들이 많았다. 위 사진에서 초안 제출됨과 최종 제출됨이 바로 그 주인공이다.
개발상에는 있는데 디자인상에는 없었다. 이렇게 원서의 상태가 빠진 게 있으면 나중에 디자인 시 '이 상태가 왜 없지? 누가 필요 없어서 뺐나?' 이런 생각을 할 수 있다. 그래서 개발상과 똑같이 맞췄고, 컴포넌트의 레이어 네임을 개발상과 똑같이 하여 개발자가 찾기 편하도록 바꾸었다.
수정 5_디자인 파일 위치 정렬
마루를 선임 디자이너(선배님)에게 인수인계받았을 때 마루 디자인 파일은 중구난방이었던 것 같다. 디자인 페이지가 어딘가 빠져있거나 어울리지 않는 것들끼리 같이 있는 경우가 있었다. 따라서 나는 2024년 3월에 인수인계를 받고 난 직후에 디자인 페이지를 각자 알맞은 카테고리로 엮어놓았다.
이렇게 정리하니 보기에 좋았다. 페이지 찾기도 좋았고. 하지만 지금 내가 필요한 건 이 카테고리 안에서도 플로우에 맞게 페이지를 배치하여 처음 보는 사람도 이해할 수 있도록 하는 것이었다. 그리하여 아래와 같이 수정하였다.
첫 번째로는 카테고리를 좀 더 상세하게 나누았다. 예를 들자면 공지사항&자주 묻는 질문 이렇게 묶여있었다면 이를 따로 떼어서 공지사항 하나 자주 묻는 질문 하나 이렇게 메인 가능별로 나누어서 카테고리 섹션 안에서 헷갈리는 일이 없도록 하였다.
추가적으로는 1년간 진행하며 쌓인 필요 없는 페이지나 요소들은 삭제하여 헷갈리지 않게 하고, 피그마 파일 로딩 속도를 조금이라도 낮추었다.(마루를 켜면 로딩이 너무 길다...)
두 번째로는 플로우가 있는 경우에는 Step이나 뎁스 별 배치에 변경을 주어 플로우를 직접적&간접적으로 보일 수 있도록 했다. 위의 사진을 보면 Step1 ~ Step8까지 스텝별로 나우어져 있고 그 안에서도 같은 뎁스이면 세로로, 다른 뎁스면 가로로 배치하여 플로우를 쉽게 알 수 있도록 했다. 아래는 어드민에서 공지사항 페이지를 뎁스 별로 나눈 것이다.
수정 6_불필요한 플로우를 포함한 페이지 삭제
사용성 테스트를 진행하며 다음과 같은 개선을 진행했다.
이렇게 수정을 했을 때는 '아직 작성하지 않은 곳이 있어요'라는 원서 작성 실패 플로우가 담긴 페이지는 필요 없어졌고, 인풋 검증 하는 박스도 필요가 없어졌다.
그리고 아직 작성하지 않은 곳이 있어요라는 로딩 화면도 필요 없어졌다. 따라서 이 두 페이지는 삭제를 했고, 작성 완료 페이지를 텍스트를 수정하여 다음과 같이 만들었다.
따라서 실제로는 사용되지 않는 페이지를 삭제하여 디자인 페이지를 줄이고, 개발자 입장에서는 코드 길이 축소를 통해 불필요한 조건이 사라져서 성능 최적화를 이룰 수 있었다.
수정 7_불필요한 UI 텍스트 속 미사여구 삭제
디자인할 때는 몰랐지만, 현재 나는 '그렇게 쓰면 아무도 안 읽습니다'라는 UX라이팅 책을 다 읽었다. 이 책을 열심히 읽은 결과 현재 마루의 UI 텍스트에 미사여구들이 많아 깔끔하지 못하고, 사용자에게 좋은 영향을 끼치지 못할 수도 있다는 것을 깨달았다.
이 책에는 '-하기' 병이라는 것에 대해 설명을 하는데 '삭제하기', '조회하기'와 같이 모든 버튼에 '-하기'를 사용할 시 버튼 당 2음절이 늘어나며 화면 내 복잡도가 증가하고, 가독성도 저하된다. 조금 벗어나긴 하지만 '서비스 탈퇴하기', '멤버십 해지하기' 같은 버튼은 사용자가 꼭 서비스를 떠나기로, 꼭 멤버십을 해지하도록 다짐하는 듯한 인상을 준다 한다.
이를 바탕으로 마루의 버튼을 보았더니, 무의식적으로 '-하기'를 붙여놓은 버튼들이 있었다.
위와 같이 진짜 무의식적으로 '-하기'병에 걸린 것인지 '-하기'를 거의 모든 버튼에 작성을 해놓았었다.
이런 '-하기'를 나는 '게시', '메시지 발송' 등으로 수정하여 삭제했다.
이렇게 수정한 마루는 구글 애널리틱스를 달아 6기생 입학 전형이나 자사고 입학 전형 때 자세한 수치와 성과를 얻을 수 있을 것 같아서 기대된다. 나와 같이 디자인 부채를 해결해 본 경험이 있다면 댓글 달아주면 좋을 것 같다.