기본 구성
입력칸은 한 줄로 시작해 글이 길어지면 최대 5~6줄까지 자라고, 그 뒤엔 안에서 스크롤돼요(MDN, n.d.-a). 왼쪽엔 첨부, 오른쪽엔 보내기를 두고, 비어 있을 땐 보내기 대신 마이크를 보여주는 방식이 흔해요. 루안과 동료들(2018)은 음성 입력이 키보드보다 빠르다고 했으니 음성 입력을 쉽게 꺼내게 해요. 엔터 키를 enterkeyhint로 '보내기'로 바꿀지, 줄바꿈으로 둘지는 앱 성격에 맞춰 정해요(MDN, n.d.-b; Apple, n.d.).
키보드에 가리지 않게
키보드가 올라오면 입력창도 함께 올라와야 해요. 안드로이드는 키보드 영역 정보를 받아 맞추고(Android Developers, n.d.), 키보드가 내려가면 세이프 에어리어 위에 붙어 홈 표시줄과 겹치지 않게 해요. 레이얼과 동료들(2015)처럼 실제 환경에선 오타가 많으니 입력 내용을 지우지 말고, 앱을 나갔다 와도 임시 저장해 둬요. 대화 유형에 맞는 키보드 유형과 자동 완성도 켜요.
전송 상태와 접근성
보내면 메시지가 바로 목록에 나타나고 '전송 중'에서 '전송됨'으로 바뀌어야 해요. 실패하면 빨간 표시와 '다시 보내기'를 두고 내용을 지키세요. 아이콘만 있는 첨부·마이크·보내기 버튼엔 화면 읽기 프로그램용 이름을 붙이고, '전송됨'은 상태 메시지로 알려요(W3C, 2023, 4.1.2·4.1.3). 빈 상태에선 보내기 버튼을 비활성 대신 숨기거나 흐리게 표시해요.
자주 묻는 질문
- 엔터 키는 보내기여야 하나요?
- 모바일에서는 줄바꿈으로 두고 보내기 버튼을 쓰는 경우가 많지만, 짧은 대화 위주라면 보내기로 설정해도 돼요.
- 입력창이 키보드에 가려지면 어떻게 하나요?
- 키보드 높이를 받아 입력창을 함께 올리고, 세이프 에어리어를 지켜요.
출처 검토일: 2026-10-27
참고문헌
- MDN Web Docs. (n.d.-a). <textarea>: The textarea element. 여러 줄 입력 요소 문서라, 줄이 늘면 높이가 자라는 입력창을 만들 때 참고하면 도움이 돼요.
- MDN Web Docs. (n.d.-b). enterkeyhint. 키보드 엔터 키를 '보내기'로 바꾸는 속성이라, 엔터 동작을 정할 때 참고하면 도움이 돼요.
- Android Developers. (n.d.). Control and animate the software keyboard. 키보드 높이에 맞춰 입력창을 올리는 방법이라, 입력창이 키보드에 가려지지 않게 할 때 참고하면 도움이 돼요.
- Apple. (n.d.). Virtual keyboards. Human Interface Guidelines. iOS 키보드 유형과 리턴 키 설정이라, 채팅 키보드 구성을 정할 때 참고하면 도움이 돼요.
- Reyal, S., Zhai, S., & Kristensson, P. O. (2015). Performance and user experience of touchscreen and gesture keyboards in a lab setting and in the wild. In Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems (pp. 679–688). ACM. 실제 환경의 터치 키보드 입력 연구라, 오타가 잦은 모바일에서 수정이 쉬워야 하는 이유로 참고하면 도움이 돼요.
- Ruan, S., Wobbrock, J. O., Liou, K., Ng, A., & Landay, J. A. (2018). Comparing speech and keyboard text entry for short messages in two languages on touchscreen phones. Proceedings of the ACM on Interactive, Mobile, Wearable and Ubiquitous Technologies, 1(4), Article 159. 음성 입력이 키보드보다 빠르다는 비교 연구라, 마이크 버튼을 둘 근거로 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 이름·역할(4.1.2)과 상태 메시지(4.1.3) 기준이 있어, 아이콘 버튼 이름과 '전송됨' 알림에 참고하면 도움이 돼요.