코드그라데이션

사례 3Product 그룹분류 속성- 대분류, 중분류, 소분류, 상세분류 보통 4단계 정도만 분류 체계를 제공하는데, 그 이하도 존재한다. 상세까지 있는데 그렇게 간다는 것은 정보의 구조가 잘못된 것이라고 간주되다 보니, 정말 맥스가 대중소상세까지.- 그런데 그 메뉴 트리마다 보여주는 목록 페이지는 거의 동일하다. 동일하게 해야지만 개발도 원활하기 때문에 보통은 그렇게 한다. 그래서 지금 이 목록 페이지가 그런 의미라면 이쪽은 이렇게 뎁스가 나쁘지 않다. 그런데 이게 뎁스하고 대중소상세라고 하는 그런 체계들이 섞여 있는 것은 좀 불편하다. 메뉴와 Depth- 메뉴에도 뎁스라는 개념을 부여하고 페이지에도 제공하는 순간 혼동이 시작된다. 그래서 추천하는 방식은 그냥 페이지 단위로 뎁스를 분리시키고, 분류 체..

사례 3토스페이 모바일 앱의 미니 버전을 만드는 것으로 실습을 진행하였다.토스페이는 원래 토스 앱 안에 내장된 기능이지만, 온오프라인 결제를 원활하게 하기 위한 목적에서 분리된 독립 앱으로 구성되었다고 이해하였다. 총평 : 메인 그룹, 프로덕트 그룹, 유틸리티 그룹, 컴퍼니 그룹까지 전체적인 정보 구조를 잘 구성하였다. Main 그룹 - 스플래시, 권한 설정, 온보딩 3개, 코치마크, 메인 페이지, 메인 팝업 등이 포함되어 있다. 잘 구성되었다. Product 그룹 - 카테고리, 상품 카테고리 하위에 목록 페이지, 목록 상세 페이지가 있으며, 상세 페이지 내에는 기본 탭, 리뷰 탭, 안내 탭이 구성되어 있다. 이 부분도 잘 처리하였다.- 랭킹과 기획전도 포함되어 있는데, 랭킹은 상세 페이지가 기존 상세 ..

사례 1Main 영역- 메인 그룹에서 스플래시 권한 설정, 메인 페이지, 메인 팝업은 모두 잘 구성하였다.- 이 두 가지는 한 번만 나오는 성격이므로, 경우에 따라 다른 방식으로 구성할 수 있다는 점을 고려해야 한다. Product 영역 - 메뉴가 다양하게 있으나, 대부분 중복될 가능성이 높다. 특별한 옵션 차이가 없다면 비슷하게 구성될 수 있다.- 예를 들어 여행, 패션을 기준으로 보면 목록 페이지 하위에 상세 페이지가 있으며, 상세 페이지에는 기본 정보 외에 정보 탭, 리뷰 탭, QnA 탭이 존재한다. QnA 탭- 질문 등록이 필요하므로 등록 기능이 반드시 필요하다. 이 등록 기능은 QnA 탭 안에 구현하거나, 고객센터 하위의 일대일 문의 탭에서 구현한 후 QnA에서 불러오는 방식도 가능하다.- 어느..

개별 작업을 어떠한 방식으로 하는 게 좋을까?- 프론트라고 했을 때 상품 전시/회원 CS/주문 결제 단위로 영역을 구분하는 게 가장 좋은 방식.- 그 이유는 연관성 때문에. 만약에 100페이지가 있는 사이트가 있다고 쳤을 때 메인 페이지 기획전 상세했다가 회원 가입으로 만든다면 굉장히 연관성이 떨어질 것. 효율도 안 난다.- 그러니까 연관성이 높은 것들끼리 묶어줘야지만 그 사람의 퍼포먼스가 지속력과 퍼포먼스 좋아지기 때문에 그것들을 묶어줘야 된다. 일반적으로 정보구조의 내비게이션 그룹을 기준으로 담당자를 배치한다. 정보그룹이란?성격이 유사한 정보의 유형을 다섯개 기준으로 나눠서 정리하여 일하는 것Main / Product / Search / Utility / Company상품/전시 담당, 회원/CS ..

화면 설계를 위한 기반 요소와 실습 적용 방식 화면 설계는 단순히 UI를 꾸미는 작업이 아니라, 여러 가지 기반 요소들이 먼저 정리된 상태에서 비로소 제대로 수행될 수 있다. 이러한 기반 요소에는 서비스 정책, 요구사항, 사용성, 정보 설계, 그리고 IT 인프라(HW, SW)가 포함된다. 이들 요소는 화면 설계의 토대가 되며, 어느 하나라도 누락되거나 정리되지 않으면 완성도 높은 화면 설계서를 만들기 어렵다.서비스 정책은 시스템이 어떤 방식으로 운영되는지를 정의하고,요구사항은 반드시 구현되어야 할 핵심 기능들을 의미하며,사용성은 사용자가 화면을 얼마나 쉽고 직관적으로 사용할 수 있는지를 판단하는 기준이 된다.정보 설계는 화면에 어떤 정보가 어떤 흐름으로 배치될지를 구조적으로 설계하는 과정이며,IT 인프..

화면설계를 하는 툴로는 크게 세 가지를 들 수 있다.PPT, Figma, Adobe XD인데, XD는 요즘에는 잘 사용하지 않는 추세이며, PPT 60~70%, Figma 30~40% 정도로 현업에선 사용 빈도가 된다고 한다. 1. PPT- 마치 참고서처럼 이용할 수 있는 장점이 있다. 그래서 정책도 넣어주고 데이터의 출처도 넣어주고 샘플도 넣어주고 너무 좋다.- 그런데 이게 이제 실시간 동기화가 안 되다 보니까 공유하기가 어렵다. 소통이 좀 어렵다.- 피그마 같은 경우에는 항상 최신 버전. 이전 버전은 버전 업을 보면 되는데 PPT는 이게 지금 최신 버전인지를 항상 이력을 확인해야 하는 단점이 있다.- 다만 다이어그램도 쉽게 그릴 수가 있고 각종 정보들을 손쉽게 첨부하고 있어서 장점이 더 많다. 2. ..

(1) 전통 IT 인프라 구조 구성- 웹 서버 (Web Server): 사용자 요청을 받아 전달. 일종의 '인포데스크' 역할- 애플리케이션 서버 (WAS: Web Application Server): 비즈니스 로직을 처리- 데이터베이스 서버 (DB Server): 실제 데이터 저장소 흐름1) 사용자가 웹브라우저를 통해 로그인 요청2) 웹서버가 요청을 받아 WAS에 전달3) WAS가 DB에 쿼리를 날려 로그인 정보 확인4) 결과를 다시 웹서버를 통해 사용자에게 전달 (ex: “로디님 안녕하세요.”) 특징- 서버 역할 분리로 보안 강화, 전문성 향상- 물리적 서버 사용 → 장비 도난/정전 사고 우려 (2) 모던 IT 인프라 특징- 서버 클라우드화: 서버를 클릭 몇 번으로 복제/축소 가능 → 유연성↑- 디..

화면설계- 지붕이다. 지붕이 잘 올라기기 위해 한장 한장 벽돌을 예쁘게 쌓아야 하는데, 이 아래 있는 것들이 잘 받쳐주어야 한다. 하부 구조- 먼저, 정보 설계를 하지 못하면, 화면 설계서를 만들 수가 없다.- 그리고 요구 사항 정의. 인하우스든 에이전시든 간에 주요 기능들이 요구 사항을 기반으로 만들어지는 것. 정책서- 서비스 정책서에서 만들어줌으로써 어떤 기능이나 메뉴들이 만들어졌을 때 운영할 수 있는 어떤 원칙을 제공하는 것. 그래서 이것이 화면 설계서에 영향이 있다. 예시회원 등급이 변경되게 되면 화면 설계서에 이 부분을 반영해줘야 돼 회원 가입을 할 때부터 이 사람의 등급을 설정할 수 있게 하거나,자기가 갖고 있는 등급을 확인할 수 있는 마이 페이지 상세에서 등급 정보를 제공해 줘야 한다. 이렇..