728x90 반응형 SMALL 전체 글72 아트보드(artboard) 1. 정의 각 화면을 보드에 나열하는 것 서비스에 포함된 화면들을 펼쳐놓은 형태를 말함 여러 가지 상황의 화면(e.g. 로그인한 계정이 회원가입되어 있을 경우, 회원가입이 되어 있지 않을 경우)을 타일처럼 나열하여 보여주는 형식 2. 사용 목적 실제 운영중인 서비스는 다양한 화면을 보유하고 있으며 조건에 따라 보여주는 결과 화면이 상이한 경우가 대부분 아트보드가 존재하면 케이스마다 디바이스로 테스트를 진행하지 않아도 신속하게 출력될 화면을 확인할 수 있음 매번 기획 시마다 기획 범위 내의 운영 서비스를 확인하기 위해 테스트 하는 시간을 줄일 수 있음(e.g. 다양한 케이스를 개별로 확인, 특수한 케이스 확인) 디자인팀에서 작업한 파일을 참고해도 되지만 디자인 작업물과 실제 운영 서비스가 상이할 수 있으며.. 2023. 8. 14. 예외처리(Exception Handling) 1. 정의 정상적으로 진행되어야 하는 프로세스에서 유저가 다른 행동을 취하는 경우를 대응하는 것 2. 예시 유저가 로그인을 시도할 때 정상 프로세스: 유저가 회원가입된 ID, PW를 정확하게 입력해야 함 [예시] (1) 유저가 ID 및 PW를 정확하게 입력하였을 경우 → 로그인 성공 (2) 유저가 ID 또는 PW를 정확하지 않게 입력하였을 경우 → 로그인 실패 로그인 성공, 실패에 대해 유저에게 어떻게 안내해줄 지 정의하여 화면설계서 작성(하단 이미지 참고) 로그인 성공 토스트 메시지로 로그인 성공 안내 로그인 실패 로그인 실패 에러 메시지 출력 2023. 7. 31. 드롭다운 메뉴(Dropdown menu), 셀렉트박스(Select box) 1. 셀렉트 박스, 드롭다운 메뉴 셀렉트ㅏ 박스와 드롭다운 메뉴는 같은 의미 메뉴 제목이 표시된 곳을 선택하면 메뉴 리스트가 아래로 펼쳐지며, 하단 항목을 클릭하면 그 항목이 선택되어 실행되는 가장 일반적인 메뉴 2. 드롭다운 리스트 드롭다운 메뉴(=셀렉트 박스) 내 화살표를 누르면 출력되는 리스트를 지칭 화살표를 누르면 숨어있던 항목들이 아래로 펼쳐져서 원하는 항목 선택 가능 다수의 선택할 수 있는 항목이 존재하고 유저가 1개의 값을 선택해야 하는 목적으로 많이 쓰임 3. 화면설계서 사용 예시 드롭다운 메뉴(=셀렉트 박스) 구성 title 취미 선택필드 Placeholder: 취미를 선택해주세요. 삼각형 아이콘:선택 시 드롭다운 리스트 출력 드롭다운 리스트 리스트 항목: 클라이밍, 크로스핏, 스쿼시, .. 2023. 7. 28. 디폴트(default) / 디저블드(disabled) 1. Default 기본 상태값을 의미 유저가 첫 화면에 접근하였을 때 보여지는 상태 또는 출력 값 상단 '주문/결제' 페이지를 예시로 화면설계서 작성 시 아래와 같이 사용 배송지 default: 유저가 등록한 기본 배송지 출력 → 해석하면 '주문/결제' 페이지 접근하면 배송지는 유저가 등록한 기본 배송지를 출력한다는 의미 요청사항 default: '문앞에 놔주세요.' 출력 → 해석하면 '주문/결제' 페이지 접근하면 요청사항은 '문앞에 놔주세요' 문구를 출력한다는 의미 2. Disabled 비활성화 상태 특정 조건이 충족될때까지 비활성화가 되는 경우 사용함 상단 '로그인' 페이지를 예시로 화면설계서 작성 시 아래와 같이 사용 [로그인하기] 버튼 default: disabled 계정 및 비밀번호 입력 시 .. 2023. 7. 27. 분기처리(Divergence) 1. 정의 한자: 分岐/分歧 나뉘어서 갈라지는 것 2. 목적 다양한 유형에 따라 각 충족되는 조건에 따라 다른 결과를 보여줘야 할 경우 사용 엑셀 if 함수와 같음 사용자가 행위를 하고 시스템에서도 체크가 가능한 상태에 사용(사용자 행위는 있으나 시스템 체크가 안되는 경우 사용 불가함) 3. 예시 일반적으로 많이 접해본 예시로 설명 회원가입 완료한 계정으로 로그인 시도 시 아래 2가지 유형이 존재한다면 (일반적으로 기획 시 더 다양한 유형이 존재하겠지만 쉬운 설명을 위해 2가지 유형으로만 구분) 로그인을 시도하는 기기에서 과거에 로그인한 이력이 존재하는 경우 로그인을 시도하는 기기에서 최초로 로그인을 시도하는 경우 2가지 유형에 따라 어떻게 처리할 지 정의(유형과 유형에 따른 결과를 정의) 로그인을 시도.. 2023. 7. 26. 컴포넌트(component), 인스턴스(instance) 1. 정의 컴포넌트 사용자와 상호작용하는 기본적인 형태로 어느 공간에서도 기능을 수행할 수 있는 최소한의 단위 Figma에서는 작은 다이아몬드 4개로 표현되어 있음(아래 이미지 참고) 인스턴스 컴포넌트를 복제한 오브젝트 컴포넌트를 수정하면 일괄 수정 개별 수정할 수 있으며 컴포넌트로 덮어씌울 수 있음 Figma에서는 빈 다이아몬드 1개로 표현되어 있음(아래 이미지 참고) 2. 컴포넌트와 인스턴스의 관계 부모와 자식 관계라고 보는 게 이해하기 쉬움 도형 또는 텍스트를 생성 → 컴포넌트(부모)를 생성 → 컴포넌트를 복제하여 인스턴스(자식)를 생성하여 사용 컴포넌트가 변경되면 관련된 인스턴스는 모두 동일하게 변경됨(하단 동영상 참고) 생성된 인스턴스의 상태를 변경(텍스트 변경, 크기 변경 등)하였다면 변경된 .. 2023. 7. 25. Front office, Back office 1. Front office 회원가입, 로그인, 구매, 환불, 거래 등 유저가 실제로 서비스를 이용하는 전체 서비스 UX가 가장 많이 적용되며, 다양한 테스트를 진행하여 유저 반응 확인(A/B 테스트 등) F/O로 줄여서 사용 2. Back office 회사 내부에서 사용하는 관리자 모드의 admin 운영 및 CS에서 주로 사용하며, 유저의 모든 정보 확인 및 관리 회사 내 이벤트, 공지사항 및 전반적인 서비스 관리 B/O로 줄여서 사용 3. Back office 기획 시 고려사항 Front office에 문제가 발생하거나 유저의 불편사항을 해소할 수 있도록 고려하여 back office를 기획해야 한다. 회사 에러로 유저가 주문 취소가 되지 않을 경우 CS로 인입하게 되고, CS에서는 주문을 취소해서 .. 2023. 7. 24. 무결성(Integrity)과 정합성(Consistency) 1. 무결성 정의 사전적 의미 데이터의 정확성과 일관성을 유지하고 데이터에 결손과 부정합이 없음을 보증하는 것 데이터 값이 정확하고 완전해야 한다는 의미(고유값을 의미) UUID: 무결성에 적합 *UUID: Universally Unique IDentifier의 약어, 범용 고유 식별자 데이터의 정보가 변경되거나 오염되지 않도록 하는 원칙 유일(Unique)성, 정확성, 일관성 필수 무결성이 훼손되는 경우 [유일성 깨짐] ‘김은혜’라는 고유값이 유일하지 않고 2개 이상 존재할 경우 [정확성 깨짐] Null, N/A값이 존재하는 경우(고유값을 지정하지 않았을 경우) [일관성 깨짐] 회원가입 당시 a 휴대폰으로 인증하여 가입 → 추후 휴대폰 변경되었으나 DB에는 변경되지 않았을 경우 2. 정합성 정의 사전적.. 2023. 7. 3. 아코디언(Accordion) 유저가 각 섹션을 펼쳐서 컨텐츠를 확인하고 필요하지 않으면 축소 제한된 공간에 정보를 표현하고, 사용자가 원하는 정보만 선택적으로 볼 수 있게 접을 수 있는 내용 패널 많은 양의 정보를 한정된 공간에 담을 때 사용 2023. 6. 29. 이전 1 ··· 3 4 5 6 7 8 다음 728x90 반응형 LIST
