디자이너가 느낀 Unit Test

[Rochelle0922]

안녕하세요 3기 러너 로셸입니다!

테크 포럼에 첫 글을 올리고 답글을 받고 나니, 또 다른 이야기를 나누고 싶은 마음이 들어 다시 한번 글을 쓰게 되었습니다.
(테크포럼 마지막 날 막차 타보겠습니다.)

디자이너로서 저는 최근 UIKit 유닛 테스트의 효용을 깨닫게 된 경험이 있습니다. 이 경험을 통해 디자인과 개발 프로세스에서 유닛 테스트가 얼마나 중요한 역할을 할 수 있는지 알게 되었고, 이를 글로 작성하면서 공부한 걸 정리 할 수 있는 기회라고 생각하고 공유해보겠습니다.

지난 글에서 언급했던 개발에 들어가기 전 진행한 저희 팀의 과제 중 마지막 5일차 과제가
현재까지 만든 뷰에 대한 Unit Test 코드를 작성하고 테스트를 통과한 화면을 캡쳐하는 것이였습니다.

저는 3번 과제인 보이스오버에 막혀 4번 과제였던 Unit Test에 대해 고민도 해보지 못한 상태로 팀원들과 함께 과제를 공유하는 시간을 가졌습니다. Unit Test를 진행했던 팀원의 코드를 보며 Unit Test에 대한 개념을 처음 접하게 되었고 Unit Test를 통해 어떻게 문제를 예방할 수 있는지 알게 되었습니다. 팀원의 이야기를 듣고 정리해 본 저의 관점에서의 Unit Test의 이점은 다음과 같습니다:

Unit Test는 '작성한 코드가 의도한대로 작동하는지 검증하는 절차’ 로

1. 엣지 케이스에 대한 발견 및 처리가 쉬워지고,
2. 코드 변경이 쉬워지고,
3. 재사용이 좋은 코드를 작성할 수 있다.
   ⠀
   ⠀
   ⠀

🔸 엣지 케이스에 대한 발견과 처리가 쉬워진다.

Unit Test를 통해 디자인 과정에서도 고려해야 할 다양한 상황들을 체계적으로 검증할 수 있습니다. 악동쿠키들 프로젝트의 텍스트 필드 예시를 들어보면 제가 처음에 과제를 하면서 고려한 케이스는 다음과 같습니다.

⠀
과제를 진행할 때 숫자 키패드만 배치했기 때문에, 처음에는 문자나 특수문자 입력에 대한 예외 처리를 고려하지 않았습니다. 하지만 팀원의 Unit Test 코드를 보면서 사용자가 다른 곳에서 텍스트를 복사해 붙여넣기 할 수 있다는 코드를 보게 되었고, 제가 놓쳤던 엣지 케이스가 있다는 사실을 인지하게 되었습니다. 이로 인해 다음과 같은 새로운 케이스를 추가하게 되었습니다.

⠀
Unit Test 작성 과정에서 이런 추가적인 케이스를 발견하고 고려할 수 있었습니다. 이는 단순히 코드를 검증하는 것을 넘어서, 사용자 경험을 더욱 견고하게 만드는 데 기여할 수 있다는 것을 깨닫게 되었습니다.
⠀
⠀
⠀

🔸 코드 변경이 쉬워진다.

Unit Test를 진행한다면 코드 수정이 필요한 상황에서 더 유연하고 안정적으로 대응할 수 있습니다. 해당 모듈이 의도대로 작동하고 있음을 Unit Test를 통해서 확인할 수 있기 때문입니다.

마찬가지로 악동쿠키들의 프로젝트의 텍스트 필드를 예시로 글자 수를 초과하지 않도록 최대 글자 수를 25자 → 20자로 변경할 때 이러한 테스트가 있으면, 코드를 변경한 후 즉시 이 테스트를 실행하여 변경사항이 의도대로 작동하는지 확인할 수 있습니다.

⠀
이렇게 Unit Test를 통해 변경사항의 영향을 빠르게 확인할 수 있기 때문에, 제가 개발자에게 “입력 필드의 최대 길이를 00으로 늘릴 수 있을까요?"라는 제안을 할 때, 이러한 변경이 다른 기능에 미치는 영향을 즉시 확인할 수 있다는 점에서 개발자와의 협업이 더욱 원활해질 수 있을 것이라고 생각됩니다.
⠀
⠀
⠀

🔸 재사용이 좋은 코드를 작성할 수 있다.

Unit Test를 하게 되면 Testable한 설계에 초점을 맞춰서 코드를 작성해야 때문에 코드 품질이 향상됩니다. Unit Test를 진행하는 단위는 독립적이어야 하기 때문입니다.

이 부분은 디자인 시스템의 컴포넌트 재사용과 연결이 된다고 생각합니다. 버튼 컴포넌트를 디자인할 때 다양한 상태(기본, 호버, 비활성화 등)를 명확히 정의하고, 이를 유닛 테스트로 검증할 수 있을 것이라고 생각합니다.
⠀
⠀
⠀

🔸 끝

이렇듯 Unit Test를 통해 결과적으로 더 높은 품질의 사용자 경험을 만들어낼 수 있을 것이라는 기대가 생기면서 Unit Test의 효용을 느끼게 된 것 같습니다.

저희 팀은 UIKit 개발 과정에 Unit Test를 도입하고 있습니다. 디자이너로서 저는 이 기회를 활용하여 Unit Test에 대해 더 깊이 이해하고, 개발 팀과 더 효과적으로 협업하고 싶습니다.

비록 제가 직접 Unit Test를 작성하지는 않더라도, 디자인 단계에서 고려해야 할 다양한 케이스들을 명확히 정의하고 문서화하는 것이 중요하다고 생각합니다. 이는 개발자들이 Unit Test를 작성할 때 참고할 수 있는 중요한 자료가 될 것이라 생각합니다.

이 경험을 통해, 저는 디자인과 개발 사이의 연결고리가 되는 Unit Test가 중요한 역할을 할 수 있다는 가치를 인식하고 앞으로 Unit Test를 적극적으로 활용하여 악동쿠키들의 매크로 서비스를 더 나은 서비스로 만드는 데 기여하고 싶습니다.

사실 Unit Test를 직접 해보지 않고 이 글을 쓰는게 무섭기는 하지만 그래도 제가 팀원의 말을 들었을 때 “아 이래서 가치가 있겠다!”라고 생각한 지점들을 말해보고 싶었습니다. 모두 남은 매크로 기간 화이팅입니다💪🏻

[thinkySide]

저도 디자인 단계에서 케이스들을 모두 전달했다고 생각했었지만, 그렇지 않은 경우가 많았던 것 같습니다 😢
(직감으로 이정도면 모든 엣지 케이스들에 대응했겠지? 라고 생각해도 어느순간 튀어나오더라구요,,,)

문서화와 커뮤니케이션의 중요성에 깊은 공감이 됩니다!!! 👍