728x90 반응형 SMALL 전체 글76 컴포넌트(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. 코치 마크(Coach Marks) 1. 정의 서비스를 처음 이용하는 유저를 위해 간단한 도움말을 제공하는 기능 2. 구동/위치 어플리케이션(app) 처음 실행 시 출력 초기 진입시에만 볼 수 있도록 설계하고, 다음 진입부터는 '설정' 같은 메뉴안에 두어 언제든지 코치 마크를 호출 가능하도록 설계 유저가 기능을 처음 사용할 때 사용하기도 함 3. 형태 화면에 반투명한 화면(layer)를 덮어 그 위에 각 메뉴에 대한 도움말 표시 가능 4. 주의사항 코치마크는 1회성으로만 노출되어야 함 2023. 6. 28. 뎁스(Depth) 1. 사전적 의미 깊이 2. 의미 정보 계층의 깊이, 메뉴의 단계를 의미 일반적으로 1depth, 2depth와 같은 형식으로 사용 Depth가 얕아질수록 고객이 더 쉽게 접근 가능. Depth가 깊어질수록 접근하기 위해서는 더 많은 절차를 거쳐야 함 3. 예시 대/중/소분류와 depth 비교 대분류 1 Depth 중분류 2 Depth 소분류 3 Depth - 4 Depth - 5 Depth 메뉴 사용 예시 문서 작업 시 사용 예시 2023. 6. 27. MVP(Minimum Viable Product) 1. MVP 정의 Minimum Viable Product 줄임말 신제품 개발에서 학습의 영향을 강조하는 lean 스타트업의 개념 최소한의 노력과 개발 공수로 완성할 수 있는 제품(=최소 기능 제품) 최소한의 기능을 통해 고객의 피드백을 얻어 시장 반응이 어떤지 조사하고 이를 실제 서비스 개발에 적용하는 제품 2. 목적 최소한의 자원으로 제품을 제작하여 가설로 시험한다. 성장을 가속화한다. 낭비되는 개발 시간을 줄인다. 초기 고객들에게 가능한 한 빨리 그 제품을 경험할 수 있게 한다. 3. 고려사항 완벽함보다 속도 중시 완벽한 제품 개발보다는 빠르게 아이디어를 구현하는 데 더 초점을 둔다. 폭넓은 관심보다는 한 곳에 집중 특히 테스트 단계의 경우 적절한 특징(예를 들어 특정 기능)에 집중하고 그 특징의 .. 2023. 6. 26. 툴팁(tooltip) 1. 영어 뜻 말풍선 2. 정의 사용자의 동선을 방해하지 않으면서 특정 기능이나 업데이트된 서비스를 가볍게 소개할 때 사용 사용자가 익숙하지 않은 기능을 이해할 수 있게 도와주는 역할 3. 작동 원리 유저가 개체 위에 커서를 오버하면 자동으로 툴팁 표시 유저가 다른 액션(클릭, 벗어나거나, 툴팁 표시 시간 초과) 시 제거 4. 예시 5. 툴팁 시 고려사항 쉽게 발견 가능해야 한다. 간결하고 유용한 정보를 제공해야 한다. 툴팁 텍스트는 유익해야 하며 화면에 나온 내용을 반복해서 출력해서는 안 된다. 적절한 배치를 해야 한다. [참고 사이트] https://metavision-blog.xyz/entry/UI-%EB%94%94%EC%9E%90%EC%9D%B8%EC%97%90%EC%84%9C-%ED%88%B4%.. 2023. 6. 23. 딤, 딤처리(dim, dimmed) 1. 영어 뜻 (빛이) 어둑한[흐릿한] 2. 정의 레이어 팝업이 노출될 때 뒷부분의 반투명 명암을 넣어서 레이어 팝업에만 집중하도록 한 형태 어두운 반투명을 말함 특정 영역 또는 팝업을 집중하도록 할 때 사용 3. 예시 2023. 6. 22. 이전 1 ··· 4 5 6 7 8 9 다음 728x90 반응형 LIST
