Project/Android

[효자손] 사용자 인터페이스 설계서

공부좀하시졍 2022. 6. 22. 23:51

<그림1>

그림 1효자손애플리케이션의 로그인 화면이다. 카카오 계정으로 로그인을 한 후, 회원 유형을 선택하는 화면(그림2)으로 넘어간다. 한 번 로그인 한 이후에는 로그아웃 또는 회원 탈퇴를 하기 전까지 자동 로그인이 되도록 하였다. 따라서 로그인 후 다음 실행 후부터는 해당 화면이 뜨지 않는다.

 

<그림2>
<그림2-1>
<그림2-2>

그림 2는 애플리케이션의 회원 유형을 선택하는 화면이다. 유형으로 부모, 자녀 중 하나를 선택할 수 있다. 이때, 자신이 어떤 유형을 선택했는지 직관적으로 나타내기 위해 각 유형에 해당하는 아이콘 이미지와 선택한 유형을 화면에 나타나도록 하였다. 그리고 별명(닉네임)을 입력한다. 해당 별명은 회원만의 고유한 값이기 때문에 중복 검사를 실행한 뒤 기존 회원의 별명과 중복되지 않는다면 다음 버튼을 클릭하여 애플리케이션의 메인화면(그림3)으로 넘어갈 수 있다. 만약 중복되는 경우 이미 존재하는 닉네임입니다.’라는 알림 문구를 통하여 사용자가 다른 닉네임을 작성할 수 있도록 안내한다.

 

<그림3>
<그림3-1>
<그림3-2>
<그림3-3>

 

<그림3-4>

 

<그림3-5>
<그림3-6>

 

<그림3-7>

그림 3은 애플리케이션의 메인화면이다. 직관적으로 만들기 위해 메인화면은 총 4가지 버튼으로 이루어진다. 이때, 버튼은 어떤 기능을 하는지 한눈에 알아볼 수 있도록 아이콘 이미지를 삽입하여 만들었다. 처음 메인 메뉴 화면으로 진입할 시 전화 권한을 수락해야 한다. 전화 권한을 수락하지 않으면 긴급 전화 기능을 사용할 수 없다.

 

그림 3내 정보버튼을 클릭하면 내 정보 화면(그림 3-1)으로 넘어간다. 내 정보 화면에서는 자신이 입력한 별명(닉네임)과 선택한 유형(부모 혹은 자녀)이 나타나게 하였다. 로그아웃 및 회원 탈퇴도 내 정보 화면에서 할 수 있다.

 

그림 3친구 목록버튼을 클릭하면 친구 목록 화면(그림 3-2)으로 넘어간다. 친구 목록 화면에는 친구 요청’, ‘친구추가버튼이 있다. ‘친구추가버튼을 클릭하여 친구추가 화면(그림 3-3)으로 넘어간다. 자신이 원하는 친구의 별명(닉네임)을 입력한 뒤 친구추가 버튼을 눌러 친구추가를 할 수 있다. 사용자에게 친구 요청이 왔다면 친구 목록 화면에서 친구 요청버튼을 클릭한다. 이후 친구 요청 화면(그림3-4)에서 친구 요청의 수락 여부를 결정한다. 수락한다면 친구 목록 화면(그림 3-5)에 자신이 친구추가를 한 회원의 닉네임과 유형이 나타난다. 친구추가는 쌍방으로 이루어지기 때문에 어느 한쪽만이 친구추가를 했다고 해서 친구가 되지 않는다. 상대방이 친구 요청을 수락해야 친구가 될 수 있다.

 

그림 3스냅톡버튼을 클릭하면 스냅톡 화면(그림 3-6)으로 넘어간다. 스냅톡 화면에는 채팅방 입장버튼과 카메라버튼이 있다. ‘카메라버튼을 클릭하면 카메라 촬영을 할 수 있고 촬영된 사진은 갤러리에 저장된다. 카메라 촬영 시 카메라 사용 권한을 수락해야 한다. ‘채팅방 입장버튼을 클릭하면 스냅톡 채팅방(그림 3-7)으로 넘어간다. 채팅방에서 자신이 보낸 대화 내용의 말풍선 색과 상대방이 보낸 대화 내용의 말풍선 색을 다르게 하여 대화 내용을 읽을 때 헷갈리지 않도록 하였다. 채팅방에선 단순 채팅 기능 뿐만 아닌, 사용자의 스마트폰 갤러리에 존재하는 사진을 전송할 수도 있다.

 

그림 3(메인 메뉴 화면)긴급 전화버튼을 클릭하면 119로 전화가 가게 하여 위급 상황 시 신고를 간편하고 빠르게 할 수 있다.

 


 

https://www.youtube.com/watch?v=b3iMcY7abKg&list=PLJ8elSeS2xGwbtYUIyoqQqnlH04DBzqB6&index=18&t=340s