UI UX 용어정리
“네모난 모달창을 조금만 바꿔주세요”
Conect 프로젝트에서는 필수정보입력 + 프로필관리 등 다양한 modal형태의 box를 관리 해야하는 일이 많았습니다. 하지만 팀원들 각자가 알고 있는 용어를 사용해 기능을 요청하려고 하니 원활한 소통이 되지 않았습니다.
따라서 다른 프로젝트에서 사용하는 용어들을 정리하기 보다, 우리 프로젝트에서 사용할 용어들을 정리하고 사용하는 단어를 통일 시켜 소통을 원할하게 진행해보자 라고 다짐하였고, 다음에 해당하는 다양한 UI/UX 용어들을 정리했습니다.
- 마우스를 올리면 색이 변하는 것 (불투명하게 변해 클릭이 가능한 것처럼 보인다.)
- 사용자가 클릭했을 때 특정 동작을 야기하는 것 (페이지 이동, form 제출, 실행, 취소 등등)
⇒ 세부적인 동작은 FE가 구성하도록 한다.
두 가지 모두 사용자에게 텍스트 형식으로 어떤 내용을 입력 받기 위한 UI이다.
- content(Markdown 형식)를 제외한 안에서 입력하는 요소들을 포함하는 창 (ex. 이메일, 비밀번호 등)
- 한 줄 정도의 내용을 입력할 수 있는 창
- 마크다운 형식의 입력 요소를 포함하는 창
- 한 줄 이상의 내용을 입력할 수 있는 창(스크롤이 생성 됨)
- 사용자가 사진을 첨부할 수 있는 UI (사진을 추가할 수 있는 버튼이 함께 존재 해야한다.)
- 예시: 소셜로그인
- 새로운 윈도우가 띄워짐
- 화면 전체를 가리는 창
- 예시: 필수정보입력
- 현재 화면에 종속되었지만 보기엔 또 다른 레이어가 올라온 것 같은 느낌이다.
- layer가 올라오는 창
- 예시: 에러메세지, 삭제 확인 메세지 등등,,
- 사용자가 수행한 어떠한 이벤트가 정상적으로 수행 된 것을 감지하였을 때 뜨는 알림을 의미한다.
- 확인(닫기) 버튼이 있는 알림창
- 자동으로 사라지는 알림창
두가지 모두 모달창과는 다르게 어느 한 요소에 종속된 느낌이다. (github참고)
- 예시: UserInfoDropdown(로그인 한 유저가 프로필 눌렀을 때 보여지는 이동 가능한 링크 모음 창)
- 하위 메뉴가 숨겨져 있다가 사용자의 마우스 오버나 클릭에 숨겨진 메뉴를 보여주는 UI
- 예시: 희망기간, 스킬(사용하는 기술스택) 선택
- 태그로 구현되며 사용자에게 내재된 옵션 값 중 하나(또는 여러 개)를 받기 위한 양식 UI
- 링크 이동이 아닌, 주어져 있는 값을 선택하는 느낌이다.
사진출처: https://blog.stibee.com/헷갈리는-ui-스티비는-이렇게-씁니다-fa2d52f36a6c
https://blog.stibee.com/헷갈리는-ui-스티비는-이렇게-씁니다-fa2d52f36a6c