은하계의 시각적 요소를 활용한 네트워킹 서비스
우리는 현재 대면하지 않고도, SNS 만으로 새로운 관계를 형성하는 시대에 살고 있습니다. 하지만, 혹시 닿을 수 있는 관계를 놓치고 있지 않으신가요? SIGNAL은 기존 SNS 서비스에 “우주” 라는 요소를 입혀, 사람들 간의 관계를 시각적으로 볼 수 있도록 하는 네트워크 서비스입니다. 그러면 우리의 은하계로 떠나볼까요?
- 전윤혁
- 이하영
-
MAIN PAGE
웹사이트의 메인 화면
웹사이트에 처음으로 접속하면, 다음과 같이 로그인 페이지가 포함된 메인 화면이 나오게 됩니다. 현재 은하계에 있는 수많은 별들이 보이시나요? 저를 표현하는 새로운 별을 만들기 위해, 회원 가입 페이지로 이동하도록 하겠습니다.
-
로그인, 회원 가입
Server와 DB 기반 로그인, 회원 가입 기능
회원 가입 화면에서는 사용자의 정보를 입력한 후, 새로운 별을 생성할 수 있습니다.
이 때, 새로운 별의 색상과 좌표는 입력하지 않아도, 범위 내의 무작위 값으로 설정되게 됩니다.
회원 가입 후 로그인에 성공하면, 위와 같이 새로 생성된 별의 좌표로 자동으로 이동하게 됩니다.
- 회원 관리 추가 기능
- 확장성을 고려하여 세션 기반 인증이 아닌, JWT Token 기반의 인증을 수행
- Spring Security을 통해, JWT Token과 SecurityFilterChain을 동시에 사용하여 보안성 향상 (Hashing)
- 회원 관리 추가 기능
-
프로필
사용자의 별 정보
프로필 화면에서는, 현재 사용자가 다른 사람들과 맺은 관계의 현황을 보여주게 됩니다.
- Signal
<프로필의 받은 signal>
<프로필의 보낸 signal>
SIGNAL에서는 SNS의 팔로워, 팔로잉 개념으로 “signal” 이라는 개념을 사용합니다.
마치 우주에서 신호를 보내는 것처럼, 사용자는 다른 사람에게 signal을 보낼 수도 있고, 받을 수도 있습니다.
-
다른 사용자 검색
다른 사용자의 별로 이동
상단의 검색 바에 다른 사람의 id를 입력하면, 해당 사용자의 별로 이동하게 됩니다.
다른 사용자의 프로필 화면에서는 채팅 전송, 시그널 보내기 기능을 이용할 수 있습니다.
-
채팅
실시간 채팅 시작
채팅 전송 버튼을 누르면 다른 사용자와 실시간 채팅을 이용할 수 있습니다.
채팅 방 정보와 내용은 모두 DB에 식별 되어 저장되기 때문에, 이전 대화 내용을 불러올 수 있습니다.
-
Signal 전송
다른 사용자에게 signal 전송
Signal 보내기 버튼을 누르면, 해당 사용자에게 signal이 전송되게 됩니다. 사용자들의 signal 현황은 실시간으로 확인되는데, 서로 signal을 보낸 사용자는 별자리로 연결됩니다.
-
기술 스택
Frontend
- three.js
- react
- redux
- styled components
- javascript
- axios
Backend
- spring boot
- java
- spring security
- github actions
- aws ec2
- mysql
- docker
| DESCRIPTION | METHOD | URI | REQUEST | RESPONSE |
|---|---|---|---|---|
| 1) 모든 사용자 정보 반환 (화면 구성) | GET | /users | - | List |
| 2) 회원 가입 | POST | /register | {"id": "test8","password": "1234"} | User |
| 3) 로그인 | POST | /login | {"id": "test8","password": "1234"} | User, JwtToken |
| 4) 특정 사용자 정보 조회 | GET | /user/{id} | - | User |
| 5) 사용자가 다른 사용자에게 시그널 보내기 | POST | /sendSignal | {"sendUser": "test8","receiveUser": "test6"} | - |
| 6) 사용자가 다른 사용자에게 보낸 시그널 삭제 | POST | /deleteSignal | {"sendUser": "test8","receiveUser": "test6"} | - |
| 7) 특정 사용자가 받은 모든 신호에 대한 User | GET | /signals/received/{id} | - | List |
| 8) 특정 사용자가 보낸 모든 신호에 대한 User | GET | /signals/sent/{id} | - | List |
| 9) 모든 연결 정보 반환 (화면 구성) | GET | /lines | - | List (6개의 x,y,z 좌표 정보만 반환) |