인공지능 시각화 EP 2 - 디자인과 UX 설계

UX 설계하기

앞선 글에서는 프로젝트의 개요와 인공신경망에 대한 내용을 살펴보았습니다. 이제 프로젝트의 얼굴이라고 할 수 있는 디자인과 UX 설계에 대해 고민해봅시다.

Mobile First Strategy

2016년, 모바일 트래픽이 데스크탑의 트래픽을 처음 뛰어넘은 이래 모바일 트래픽의 비중은 꾸준히 증가해왔습니다. 2025년 7월 기준 약 60.5% 정도의 웹 트래픽을 모바일이 담당하고 있죠.¹ 주위를 둘러봐도 스마트폰을 사용하지 않는 사람은 찾아보기 힘듭니다.

이런 현 상황에 있어 작은 화면을 우선적으로 고려하는 설계는 배제할 수 없는 선택처럼 보입니다. 모바일 기기의 특성상 제약이 많기 때문인데요. 제한적인 네트워크 성능과 작은 화면 크기의 가진 모바일의 특성을 볼 때, 모바일 환경을 기준으로 디자인 설계를 한다는 것은 곧 다른 환경도 포괄할 수 있는 확장성을 의미했습니다. (더 큰 화면을 가진 다른 환경에서는 보다 많은 정보를 용이하게 표현할 수 있습니다.)

제한적인 환경에서 UX 설계하기

그러나, 문제가 한 가지 더 있습니다. 많은 수의 노드를 작은 화면 안에 표현해야 하는 퍼셉트론의 특성은 UI 설계를 까다롭게 만듭니다. 더하여 좁디 좁은 스크린에서 사용자의 입력까지 표현해야 합니다. 와우.

생소한 요소를 작은 스크린 안에 표현하되, 가능한 직관적으로 컨트롤 할 수 있게 해야 한다.

쉽지 않은 문제 상황이네요.

화면을 돌려서 넓은 가로 비율을 활용해야 할까요?
음.. 이미 세로 비율과 화면에 익숙한 스마트폰 사용자에게 자연스러운 사용 흐름을 망치게 하고 싶지는 않았습니다.

물리적 요소 활용하기 / 물리적 특성 분해하기

최종적인 디자인을 보여드리기 앞서 트러블슈팅 과정을 잠시 설명해보겠습니다. 결과물이 궁금하신 분들은 아래 결과물을 먼저 보고 오셔도 무방합니다.

제가 ‘좋은 디자인’에 관련된 내용을 이야기하며 몇 가지 기준에 대해 언급한 적이 있습니다. 아래와 같은 내용인데요.

1. 이미 많은 사용자들로부터 사용되고 있거나 과거부터 사용 되어온 기표의 경우 (사회적으로 학습된 널리 보편화된 직관)
2. 특정한 동작이 어떤 행위에 물리적 행동과 유사한 경우 (물리적으로 학습된 직관)

1번인 널리 보편화된 직관 이라는 관점에서 보았을 때, 인공신경망의 구조가 사람들에게 친숙할 리 없습니다. 그렇다면, 2번 기준인 물리적/행동적 특성을 UI 요소로 활용할 순 없을까요?

회전의 특성

‘회전’이라는 동작은 물체의 상태를 변화시킴으로서 무언가를 표시하거나 수정하기 용이하게 만듭니다. 흥미로운 특성이네요. 조금 더 생각해봅시다.

회전은 일반적으로 둥근 물체에서 자주 일어납니다. 다시 말해, 둥근 요소²는 ‘회전한다’라는 물리적 직관을 쉽게 불러 일으킵니다.

대부분의 사람들은 깊게 생각하지 않고도 가스레인지의 불을 키거나 텀블러의 뚜겅을 여는 등 의도된 행위를 합니다. 이는 우리의 뇌가 물체의 특성을 파악하고 이를 직관을 통해 자연스레 행동으로 연결하기 때문인데요. NNV 프로젝트의 디자인도 이런 점들을 의도하여 설계하고자 노력했습니다.

결과물

최종 디자인 UI

아래 보이는 디자인이 프로젝트 UI입니다.

• 유저의 입력을 받는 캔버스
• 인공신경망을 표현하는 퍼셉트론
• 추론한 숫자를 표시하는 영역

총 3가지 파트로 구성되어있습니다.
어떤가요? 각 영역을 어떻게 컨트롤 해야 할지 알 것 같나요?

각 파트의 설계 의도

인공신경망 시각화 영역(스크롤 + 인디케이터 + 다이얼의 조합)

인공신경망을 표현하는 영역은 우리가 일상적으로 사용하는 다이얼(노브)의 특성을 모방하였습니다. 가로 스크롤의 이점을 통해 다른 영역을 침범하지 않고 많은 노드를 볼 수 있도록 하였고, 레이아웃을 동글게 배치함으로서 회전의 특성과 심미성을 부각시키고자 노력하였습니다.

더불어 눈금자 그리드 기준선을 활용하여 돌릴 수 있다는 직관을 더하여주고, 요소가 얼마나 회전했는지도 가늠할 수 있도록 의도하였습니다. (요소를 화면 경계에 걸친 표현도 뷰포트 바깥에 내용이 더 있음을 암시합니다)

마지막으로 화살표 모양의 인디케이터(기표)를 배치함으로서 가능한 동작을 명시적으로 표현하였습니다.

캔버스 영역

사용자의 숫자를 입력을 받는 캔버스는 퍼셉트론 영역과의 구분감을 위해 검은색을 베이스로 디자인하였습니다. 더불어 모눈 캔버스 형태로 그림을 그릴 수 있는 공감임을 알 수 있도록 하였는데요. 사용자의 입력 편의성을 확보하기 위해 가능한 넓은 공간을 할당하고자 하였습니다.

추론 결과 영역

사용자의 입력에 따른 인공신경망의 추론 결과를 보여주는 영역입니다. 결과를 명확히 보여주고 프로젝트의 무드에 맞게 깔끔한 고딕체 폰트인 pretanderd-bold를 사용하였습니다.

전체적인 기준

이 밖에도 다음과 같은 기준들에 유의하며 NNV 프로젝트의 UI를 설계하였습니다.

1. 각 요소는 가시적인 (지각된) 행위 지원성을 내포하는가?
2. 각 섹션은 동작을 위한 직관적인 기표를 표기하였는가?
3. 예상 불가능한 사용 시나리오는 무엇인가?
4. 행위(동작)에 관한 적절한 피드백이 계획되어 있는가?
5. 목적에 맞는 디자인인가?

여담 - 디자인 QA

아무리 디자인에 의도가 들어간다 한들 사용자가 설계대로 받아들이지 않는다면 의미가 없습니다. 그런 의미에서 간단한 QA를 진행해보았는데요. 대상은.. 저희 아버지십니다.

진행방식은 간단했습니다. 인공신경망이나 프로젝트에 대한 아무런 정보도 제공하지 않고, 각 섹션에서 의도한 동작을 하는지 관찰해보는 것입니다.

디자인도 마쳤으니, 이제 개발을 시작해봅시다! 다음 글에서는 실제 구현을 위한 설계와 아키텍쳐 구상에 대해서 다뤄보겠습니다.

미리보기

실제 완성된 NNV 프로젝트의 모습

각주(2)

1. 출처: Visual Capitalist, “Visualized: Desktop vs. Mobile Global Web Traffic Over Time” ↩

2. 더불어 둥근 요소는 미학적으로도 아름다운 인상을 만들기 좋습니다. ↩