제로베이스 학습 노트

[제로베이스 UI/UX 파트타임 스쿨] 7주차 - (일) 모듈

thinkuser 2025. 5. 4. 23:20

제로베이스 49일차 학습노트이다.

오늘은 프리스쿨 마지막 수업인 규칙의 모듈에 대해서 배웠다. 이때까지 프리스쿨 수업을 들으면서 많은 실습을 하였는데, 많은 도움이 되기도 했지만 너무 따라하기 위주라서 조금 아쉬운 부분도 있었다. 지금까지 들은 프리스쿨은 기본기를 다지는데에는 반복적인 실습으로 계속 같은 기능을 반복해서 쓰다보니 단축키를 외우거나 피그마를 손에 익히는 데에는 매우 좋았으나 더 좋은 디자인을 만들거나 혹은 빠르게 만들수 있는 팁은 조금 부족한 것 같았다. 물론 챕터 7에서 좋은 디자인이 무엇인지에 대한 강의자분의 팁을 얻을 수 있었지만 그 수업에서도 대부분이 클론 디자인이라서 아쉬운 부분이 있었다.


오늘의 강의 내용

 

1. 모듈

일관된 모듈 시스템과 컨텐츠의 맥락에 맞는 규칙적인 정보 구성으로 정보 전달의 혼선을 줄이고 고객의 사용성을 높여서 빠른 컨텐츠 이해를 돕는다. 빠른 이해와 사용성은 빠른 구매, 빠른 넥스트 스텝으로의 이동이라는 효과를 낳는다. 같은 모듈 안에서 이미지만 변경하여 만들면 다양한 소스를 같은 비율로 효과적으로 관리할 수 있다. 예를 들어 배경만 단색으로 넣고 그 위에 음식 사진들을 바꾸면서 넣으면 같은 분위기로 여러개의 모듈을 만들 수 있다.

 

또한 모듈에는 이미지, 플래그, 타이틀, 설명 등이 들어가는 방식이 동일하게 해주면 관리하기 쉬워진다. 이것은 크기가 작아져도 비슷하게 적용할 수 있으며, 가로길이가 작아지면 타이틀이 한 줄이었던 것이 두 줄이 되는 식이다. 오늘 실습은 쇼핑 판매 페이지의 각각의 상품들이 모듈로 디자인되어있는 것이었는데, 같은 컨텐츠도 세로 모듈과 가로 모듈을 했을 때 들어갈 수 있는 정보나 보이는 내용의 차이가 꽤 난다는 것을 알 수 있었다. 세로 모듈은 사진이 크게 나올 수 있었고, 가로 모듈은 글이 많이 들어갈 수 있는 포맷이었다.


모듈은 실제로 요즘 많은 어플에서 정말 잘 쓰이는 디자인 요소이다. 정보들을 모듈 단위로 묶어서 사용자에게 전달하는 것이 트랜디한 어플들 부터 유행하여 일반화 되었고 이미 친숙도가 쌓여가는 것 같다. 서비스에서 어떤 정보들을 어떻게 모듈로 묶을지 고민하는 것이 중요해보인다. 오늘로서 모든 프리스쿨 수업을 들었고 이제 부터는 다시 디자인 기초 강의로 넘어간다. 실습을 많이 해서, 이제는 UX 이론에 대해서 더 상세하게 배우고 싶던 차에 다음 수업에서 해당하는 것을 많이 배울 수 있을 것 같아서 기대가 된다.

 

이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.