섹션 12의 '디자인 시스템 만들기' 강의 관련하여 질문 있습니다

안녕하세요^^

강의 듣다가 궁금한 점이 생겨 질문 드립니다.

위 캡쳐 이미지에서 두번째 'Heading2' 부분 밑에 있는 카드(product card)에서 body text의 예시들이 2줄로 작성되어 있습니다.

제 생각엔.. 상품에 따라서 body text가 1줄이거나 혹은 3줄인 경우도 생길 것 같은데, 혹시 그런 것들도 디자인 시안에 반영해야 하는지 궁금합니다. 1줄이면 body text와 별 사이가 너무 멀어보이고, 3줄이면 카드 사이즈가 더 길어져야 할 것 같아서요..

아니면 개발자나 다른 동료들과 그 때 그 때 커뮤니케이션 하면서 해결하나요? 실무에서는 어떻게 하시는지 궁금합니다

답변 부탁 드립니다^^

감사합니다.

안녕하세요. ayo님 좋은 질문 감사드립니다.

말씀하신 카드 내 바디 텍스트 처리는 말씀하신대로 신발 제품의 이름의 길이가 길어질 수도 있고, 또는 짧아질 수도 있습니다.^^

이런 경우, 이를 기획하는 입장에서 무엇을 고려하느냐에 따라 다를 수 있을 것 같아요.

즉, 최대치로 보여주는 것을 1줄로 할지, 3줄로 할지, 또는 그 이상으로 할지는 기획자 및 디자이너가 정하기 나름인 것 같아요.

제가 일을 하는 실무에서 이를 디자인해야 한다면 팔고 있는, 또는 디스플레이하는 아이템에 대해 가능한 많은 부분에 대해서 고려하여 결정을 할 것 같아요. 우리가 파는 제품(여기서는 신발)의 글자 수가 보통 어느 정도가 되는지, 엣지 케이스(예외적으로 너무 글자수가 많거나 너무 적거나)는 어떤 것이 있는지 등을 고려할 것 같습니다. 그리고 말씀하신 것처럼 카드의 상하 길이가 너무 길어지지 않는지 고려하는 것도 좋을 것 같습니다. 아무래도 카드길이가 너무 길어지면 사용자가 한번에 화면에서 볼 수 있는 카드의 개수가 적어질 수 있으니까요.

그렇게 해서 2줄로 할지, 또는 3줄로 할지를 정하고, 엣지 케이스에 대해서는 어떻게 처리를 할지 정할 것 같아요. 그리고 엣지 케이스의 경우 끝에 "..." 표시를 하여 사용자로 하여금 카드 안에 생략된 글자가 있음을 알려주는 방법이 있습니다. 아래는 "..."를 표시한 사례들이에요.

-> 에어비앤비 사례

-> 인프런 사례.

그리고 위 인프런이나 에어비앤비 사례의 경우, 최대치를 2줄로 하고 2줄 이상인 아이템인 경우 "..."를 표시한 걸 확인할 수 있어요.

인프런의 경우, 바디텍스트가 최대 2줄이고, 만약 1줄만 채워지게 될 경우 지식공유자의 이름과 바디텍스트사이의 공간을 좁히지 않고 그대로 둔 것을 확인할 수 있는데요. 이렇게 표현하는 것의 장점은 오른쪽 또는 왼쪽에 있는 다른 카드들과 같은 레벨의 정보들을 평형하게 둘 수 있어서 사용자 입장에서는 정보 습득이 더 용이하고 비교가 쉽다는 것이 있어요. 예를 들어 글자 수와 상관없이 별점리뷰 정보가 수평으로 놓여져 있기 때문에 카드 간 별점 비교가 쉽습니다.

그러면 도움이 되셨길 바라고, 또 궁금한 점이 있다면 언제든지 문의주세요.

이 질문 채널을 이용하셔도 되고, 카카오 1:1 오픈 챗으로 문의주셔도 됩니다^^

인프런 커뮤니티 질문&답변