티스토리 뷰
사례 3
Product 그룹
분류 속성
- 대분류, 중분류, 소분류, 상세분류 보통 4단계 정도만 분류 체계를 제공하는데, 그 이하도 존재한다. 상세까지 있는데 그렇게 간다는 것은 정보의 구조가 잘못된 것이라고 간주되다 보니, 정말 맥스가 대중소상세까지.
- 그런데 그 메뉴 트리마다 보여주는 목록 페이지는 거의 동일하다. 동일하게 해야지만 개발도 원활하기 때문에 보통은 그렇게 한다. 그래서 지금 이 목록 페이지가 그런 의미라면 이쪽은 이렇게 뎁스가 나쁘지 않다. 그런데 이게 뎁스하고 대중소상세라고 하는 그런 체계들이 섞여 있는 것은 좀 불편하다.
메뉴와 Depth
- 메뉴에도 뎁스라는 개념을 부여하고 페이지에도 제공하는 순간 혼동이 시작된다. 그래서 추천하는 방식은 그냥 페이지 단위로 뎁스를 분리시키고, 분류 체계는 대중소상세 정도로 하는 것이 좋다.
본격 피드백
- 상세 페이지 하위에 추가 정보, 제품 정보, 반품 교환, 판매자, 주의사항 등이 있다.
- 다음에 리뷰 목록이 있고 리뷰 상세가 있다.
- 리뷰 등록은 어디서 하는가 하면, 보통 제품을 구매한 사람만 리뷰를 등록할 수 있기 때문에 이를 어떻게 구성하느냐에 따라 다르다. 여기에 세트로 두거나 여기에 등록까지 두거나, 아니면 이쪽에 모두 0 처리를 하고 마이페이지 하위에 마이 리뷰라는 메뉴를 만들어서 거기서 내가 쓴 글들을 볼 수 있게 구성하기도 한다.
- 마이 리뷰에서는 마찬가지로 리뷰 목록을 제공하고 등록과 상세, 수정을 제공한다. 이렇게 처리할 수도 있다.
디자인 벌 수와 페이지 id
- 디자인은 두 벌이 나온다. 퍼블리싱도 두 벌이 나온다. 퍼블리싱을 한다고 해서 프론트 개발을 한다고 해도 그건 두 벌이 나와야 한다. 별도의 아이디를 지정을 갖고 있어야 하기 때문에 페이지로 분리하는 것이 맞다. 아코디언이라 불릴 수 있는 것들을 보기 쉽게 만들어서 아코디언으로 구현할 수도 있지만, 원래 분리되어 있는 페이지를 합치는 과정에서 탭이나 아코디언을 쓰기도 한다. 그런 것들은 다 분리해 주는 것이 좋다.
- 반드시 주소가 달라져야지만 별도로 되는 것은 아니다. 앱 같은 경우에는 주소라는 개념이 별로 없다. 희미하게는 있다. 그러니까 페이지는 디자인되는 단위로 보는 것이 가장 정확하다. FAQ나 후기 같은 것들을 보면 디자인이 하나는 목록 한 벌, 그리고 상세는 별도로 만들어서 작업이 된다. 그래서 기획서도 거기에 맞춰서 목록 한 벌과 상세 한 벌, 등록 한 벌을 만들어줘야 한다. 그렇지 않으면 디자인 공수가 엄청 커진다.
아코디언과 탭
- 어느 순간 아코디언 방식으로 개편을 했다. 사용성이 좋기 때문에 이렇게 변화된 것이다. 하지만 디자인적인 공수는 동일하게 필요하다. 목록도 하나 필요하고 상세도 하나 필요하다. 그래서 기획 쪽에서 그러한 사실을 아는 사람은 분리해서 잡고, 그렇지 않은 사람은 하나를 잡는다. 어쨌든 좋은 협업을 하기 위해서는 공수를 기존보다는 낮게 만들어줘야 한다.
탭
- 탭 같은 경우도 마찬가지다. 탭도 사실은 다 별도의 페이지로 찢어서 만들 수 있다.
- 하지만 탭이라는 것은 결국 분리된 페이지를 하나로 모으는 방식이다. 본질적으로는 다 별도의 페이지인 것들이다.
그렇게 바라봐야 디자인과 퍼블리싱 같은 협업이 원활하게 이루어진다. 기획 쪽에서도 탭, 아코디언, 팝업 등은 모두 별도의 페이지로 간주해서 작업을 해주는 것이 더 낫다고 할 수 있다.
- 마이페이지 하위에 마이 쿠폰, 찜한 메뉴, 주문 배송, 마일리지, 장바구니, 마이 리뷰가 있는데 . 결제 수단 관련된 부분들도 잘 정리되어 있다. 나머지 부분도 잘 되어 있다. 정석적인 커머스 형태를 잘 정리했고, 상품 쪽도 잘 나눠 안정적으로 진행될 수 있을 것 같다.
'[기획] > 화면설계 심화' 카테고리의 다른 글
정보구조도 실습 피드백 (2) (1) | 2025.04.25 |
---|---|
정보구조도 실습 피드백 (1) (1) | 2025.04.23 |
개별 설계 효율적으로 하는 법 (0) | 2025.04.22 |
화면 설계를 위한 기반 요소와 정보구조도 실습 예시 (0) | 2025.04.22 |
화면 설계의 방식과 장단점 (0) | 2025.04.21 |