[GL 3기] ChatBraille — 사용자의 언어로 바뀌는 실시간 점자 안내

ChatBraille 프로젝트 소개

 

공항이나 박물관, 지하철역에는 중요한 안내가 많습니다. 하지만 점자가 현지 언어로만 제공된다면 외국인 시각장애인은 필요한 정보를 읽기 어렵습니다. 안내 내용이 바뀌어도 고정된 점자판을 곧바로 수정하기 쉽지 않다는 문제도 있습니다.

ChatBraille은 사용자가 기기에 가까이 다가오면 선호 언어를 확인하고, 안내 문구를 해당 언어의 점자로 바꿔 보여주는 실시간 점자 변환 시스템입니다. 착용 기기, 점자 하드웨어, 서버와 관리자 웹을 하나의 흐름으로 연결했습니다. 🌏

함께 만든 팀 👥

역할팀원

리더·백엔드	박지수
임베디드	윤승진, 윤창훈, 김혜경, 박석희
백엔드	박지훈, 김남주, 황도윤
프론트엔드	송지원, 장태이, 박금정

임베디드와 웹 개발 경험뿐 아니라 교육, 외국어, 번역 등 다양한 배경을 가진 구성원이 함께 정보 접근성의 문제를 살피고 기술적인 해결 방법을 구체화했습니다.

사용자를 알아보고 정보의 언어를 바꾸다

사용자가 ESP32 기반 착용 기기를 지니고 점자 안내판에 접근하면, 점자 기기는 BLE 신호를 통해 가까운 사용자를 인식합니다. 서버는 등록된 사용자 정보에서 선호 언어를 확인하고 안내 문구를 번역한 뒤 점자 배열로 변환합니다.

[사용자 착용 기기]
      ↓ BLE·MAC 주소
[점자 안내 기기]
      ↓ 사용자·기기 식별
[Spring Boot 서버]
      ├── 언어 및 안내 문구 조회
      ├── 번역·점자 배열 변환
      └── 출력 상태 실시간 공유
                    ↓
          [물리 점자 + 관리자 웹]

사용자는 별도의 메뉴를 찾아 언어를 바꾸지 않아도 되고, 관리자는 한곳에서 안내 문구와 기기 상태를 관리할 수 있습니다.

36개의 모터가 점자 문장을 만듭니다 🔧

점자 하드웨어는 ESP32 마스터와 Arduino 슬레이브, PCA9685 모터 드라이버를 중심으로 구성했습니다. 총 36개의 SG90 서보모터가 여섯 점으로 이루어진 점자 셀 여섯 개를 표현합니다.

점자 배열을 물리적으로 출력하는 하드웨어

 

서보모터의 회전은 랙 앤 피니언 구조를 통해 점의 위아래 움직임으로 바뀝니다. 문장이 여섯 셀보다 길면 좌우 버튼으로 다음 구간을 넘겨 읽을 수 있도록 설계했습니다.

프로젝트에 활용한 기술 스택 🛠️

영역기술

임베디드	ESP32, Arduino, UART, I2C, PCA9685, SG90
프론트엔드	React, TypeScript, Tailwind CSS
백엔드	Java, Spring Boot, Spring Security, JWT, MyBatis
데이터베이스	MySQL
실시간 통신	WebSocket, SockJS
AI·번역	Papago, ChatGPT
인프라	AWS EC2·ECS·ECR, S3, CloudFront, Docker, Nginx, GitHub Actions

하드웨어 제어와 사용자·기기 관리, 번역과 실시간 모니터링을 각각의 영역으로 나누면서도 하나의 서비스처럼 동작하도록 연결했습니다.

소프트웨어 아키텍처

ChatBraille 소프트웨어 아키텍처

 

React 관리자 화면은 Spring Boot API를 통해 사용자와 기기, 언어와 출력 이력을 관리합니다. WebSocket은 점자 기기에서 출력되는 상태를 관리자 화면에 실시간으로 전달하고, MySQL은 운영에 필요한 정보를 저장합니다.

실제 프로젝트 화면으로 살펴보기 💻

관리자는 웹 화면에서 사용자와 점자 기기, 언어 정보를 확인하고 각 기기의 운영 상태를 관리할 수 있습니다.

사용자와 언어, 점자 기기를 관리하는 화면

 

안내 문구가 변환되면 물리 점자와 관리자 화면의 점자 상태가 함께 갱신됩니다.

점자 기기와 웹 화면의 실시간 변환 상태

 

한국어, 영어, 일본어, 중국어 검색을 지원해 여러 국적의 방문자가 이용하는 공간에서도 안내 콘텐츠를 유연하게 운영할 수 있도록 구성했습니다.

접근성을 기능이 아닌 출발점으로

ChatBraille은 점자를 출력하는 장치를 만드는 데서 멈추지 않았습니다. 실제 사용자의 생활 경험을 듣고, 누가 어떤 상황에서 정보에 접근하기 어려운지부터 살폈습니다.

그 결과 사용자를 인식하는 하드웨어, 언어를 바꾸는 서버, 내용을 관리하는 웹 화면이 함께 필요하다는 방향을 찾았습니다. 접근성을 일부 사용자를 위한 추가 기능이 아니라 서비스 전체를 설계하는 기준으로 삼은 것입니다.

프로젝트 후기

프로젝트를 진행하며 하나의 기기에서 하나의 시스템으로 시야가 넓어졌습니다. 처음에는 점자를 어떻게 물리적으로 움직일지에 집중했지만, 실제 공간에서 운영하려면 사용자 인식과 콘텐츠 관리, 상태 확인까지 함께 필요했습니다.

하드웨어와 소프트웨어 사이의 협업 방식도 배울 수 있었습니다. 점자 배열의 형식, 기기 식별값, 실시간 상태처럼 서로 주고받을 데이터를 명확히 정하면서 각 영역이 안정적으로 연결됐습니다.

가장 의미 있었던 경험은 기술의 목적을 분명하게 확인한 일이었습니다. 새로운 기술을 보여주는 데서 끝나는 것이 아니라, 정보에서 소외되는 사람이 자신의 언어로 안내를 읽을 수 있게 만드는 것이 프로젝트의 중심이었습니다.

작은 점들이 더 넓은 세상을 연결하도록

점자 한 칸은 여섯 개의 작은 점으로 이루어져 있습니다. ChatBraille은 이 작은 점에 사용자 인식과 다국어 변환, 실시간 운영 기술을 더해 더 많은 사람이 같은 공간의 정보를 함께 읽을 수 있는 방법을 제안했습니다.

사용자가 다가가는 순간 정보도 그 사람에게 한 걸음 가까워지는 세상, ChatBraille이 만들고 싶은 변화입니다. 😊