로그인 흐름과 관련하여 남은 이야기가 있지만 뒤에서 마저 정리. 서비스 페이지 구현과 관련된 내용의 경우 프론트 쪽 커리어를 쌓고 있는 것도 아니고, UI의 전체적인 흐름 또한 디자이너가 담당했기에 아주 간단하게만 짚고 넘어가고자 한다.
서비스 페이지는 클로즈 베타 테스트 시의 디자인을 기준으로 하며, 추후 개선된 지점들은 뒤에서 따로 다루겠다.
HTML/CSS
전체적인 페이지 구성은 크게 세 가지로 나뉜다:
- 세션 관리와 새 세션 생성, 그리고 그 외 자잘한 기능들을 담고 있는 Sidebar 영역
- 에이전트와 대화를 나눌 때 참고할 가이드를 담고 있는 Serviceguide 영역
- 실제 채팅이 이루어지는 contentWrapper 영역
특히 Sidebar의 경우 필요에 따라 줄어들 수 있도록 만들기 위해 별도의 Collapsedsidebar를 만들고 두 가지가 서로 토글되도록 만들었다.
또 앞에서 나타나지 않은 요소로 크게 네 개의 모달과 바텀시트 1개가 존재한다.
-
세션 삭제 전 확인을 하는 Deletesessionmodal. 이렇게 삭제하기/취소 버튼이 있는 경우 '삭제하기'버튼 하나에만 강조색을 주어야 해당 버튼이 강조되어 보인다.
-
데이터 관련 설정 기능과 그 외 정보를 담고 있는 Settingsmodal. 삭제 모달보다 좀 더 구분감이 느껴지도록 배경색을 더 어둡게 처리하였다.
-
사용자 프로필과 로그아웃 버튼을 담고 있는 Profilemodal
-
카드 이름을 쉽게 입력하기 위해,
/키로 띄울 수 있는 Autocompletemodal.
동작하는 모습은 아래와 같다:
-
마지막으로 랜덤으로 한 장 혹은 세 장의 카드를 뽑을 수 있도록 하는 Bottomsheet. 이 기능을 채팅에 통합하는 것도 고려했지만 실물 카드를 뽑는 걸 더욱 주된 시나리오로 상정하고 만든 만큼 어디까지나 접근성을 높이기 위한 보조 기능이라고 생각하고 별도 시트로 분리하였다.
CSS의 경우 이미지가 프리로딩되도록 하여 아이콘이 늦게 나타나는 현상을 막고자 하였으며
body::after {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
z-index: -1;
content: url('https://yihoon-tarotchat-bucket.s3.us-east-1.amazonaws.com/icons/side-hover.png')
/* (이하 생략) */
};베타테스트 당시에는 구현하지 않았지만 반응형 쿼리를 추가하여 보다 작은 해상도에도 서비스 이용이 원활하도록 하기 위해 논의 중에 있다.
Javascript
JS 코드도 모든 내용을 다 다루기에는 너무 방대할 뿐더러 주요 기능들은 앞에서 다루었기때문에, 최종적으로 완성된 코드 흐름만 공개하고자 한다.
대화 세션과 관련된 파트는 아래와 같은 흐름을 가지며, 이전에 이미 다룬 내용이기에 크게 언급하지 않고 넘어가겠다.
메시지 처리 부분도 마찬가지. 기존에 언급한 내용 외에 대화를 입력하는 InputArea의 활성화 여부를 토글하고 그에 따른 스타일을 변경하는 함수들이 추가되어 있다.
이어서 Autocompletemodal 관련 함수들. slash 입력 시 모달이 표시되고, 실시간으로 입력되는 텍스트에 따라 일치하는 카드들만 필터링해서 보여준다. 모달이 표시된 상태에서는 Esc, Enter, 위아래 화살표 키를 통해 조작이 가능하다.
Bottomsheet는 간단히 카드 조합을 무작위로 생성하는 기능과 그 결과를 클립보드에 복사하는 기능, 그리고 그에 따른 애니메이션 동작들로 구성된다.
사이드바와 모달, 로티 등에 대한 요소를 표시하고 숨기는 로직들도 구현되어 있다.
마지막으로 초기화 및 이벤트 관리는 아래와 같이 구성되어 있다. 페이지 초기화가 먼저 실행된 후 이벤트 리스너가 초기화되는 형식. 오른쪽의 웹소켓 연결 처리는 세션 연결 시에 동작한다.
