✏️ 한줄 소개

디자인이 깔끔한 채팅 어플

🗓️ 진행 기간

2022.03.01

👤팀 구성

개인 프로젝트

📜 내용

• 프로필 뮤직
• 채팅

🛠 기술 스택

• HTML/CSS
• vanilla JS

🖥 개발 내용

1. login 화면

2. 상태바에서 TalkTalk을 누르면 다시 로그인 페이지로 돌아갈 수 있다.

3. 스플래시 화면을 볼 수 있다.

4. home 페이지는 profile과 friends영역을 구분했다.

5. 우측 상단 아이콘에 애니메이션 효과를 주었다.

6. chat 페이지는 화면과 입력창에 애니메이션 효과를 주었다.

7. navigation bar는 해당 페이지의 아이콘을 진하게 표시하고, 메시지 알림 표시와 효과를 넣었다.

8. mobile에 맞게 화면 너비를 하지 않으면 화면을 볼 수 없게 했다.

​

💡 성장 경험

처음으로 여러 페이지를 오가는 화면을 구현했습니다.

각 페이지의 목적에 맞게 컴포넌트를 구조화했습니다.

​

👀 서비스 화면

메인 화면

스플래시 화면과 홈

상단의 음악 아이콘 또는 설정 아이콘을 누르면 해당 페이지로 이동할 수 있다.

프로필 뮤직과 세팅

채팅창

부가 서비스

반응형 웹 구현

​