Docs: Update README.md

README.md

@@ -1,7 +1,9 @@
-# frontend-1st-slack
+# 우리FISA - Frontend Toy Project
+---
 
 ## 서비스 소개
-이 프로젝트는 Slack의 기능을 클론하여 제공하는 서비스입니다. 팀 커뮤니케이션을 위한 다양한 기능을 제공하며, 사용자가 채널을 생성하고 다이렉트 메시지를 주고받을 수 있는 플랫폼을 구현했습니다.(HTML, CSS 구현 완료)
+이 프로젝트는 Slack의 클론 프로젝트입니다. 팀 커뮤니케이션을 위한 다양한 기능을 제공하며, 사용자가 채널을 생성하고 다이렉트 메시지를 주고받을 수 있는 플랫폼을 구현했습니다.(HTML, CSS 구현 완료)
+![image](https://github.com/user-attachments/assets/842b4b4b-f2a1-47c8-a6f8-db6640cf6113)
 
 ## 팀 소개
 |      신희원       |          여은동         |       유승한        |                                                                                            
@@ -10,9 +12,10 @@
 |   [@glone0506](https://github.com/glone0506)   |    [@sillonjeu](https://github.com/sillonjeu)  | [@ryuseunghan](https://github.com/ryuseunghan)  |
 | Frontend | Frontend | Frontend |
 
-## 실행방법
-- 배포된 서비스는 아래 링크에서 확인할 수 있습니다.
-[웹사이트 주소](https://woorifisa-service-dev-4th.github.io/frontend-1st-slack/src/main-page.html)
+## 데모 링크/ 시연 영상
+- [데모 링크](https://woorifisa-service-dev-4th.github.io/frontend-1st-slack/src/main-page.html)
+- 시연 영상
+![Uploading Slack - Chrome 2025-01-03 17-32-20 (1).gif…]()
 
 ## UI 스타일 가이드라인
 
@@ -32,9 +35,14 @@
 
 ![컬러 배색](https://github.com/user-attachments/assets/6776a4bc-e041-4422-abce-6ff101ad8433)
 
-### 여백 및 정렬 방법
-- **여백**: 모든 주요 컴포넌트는 충분한 여백을 두어 시각적으로 깔끔한 레이아웃을 유지합니다.
-- **정렬**: 주요 콘텐츠는 중앙 정렬로 배치됩니다.
+## 프로젝트 룰
+
+### Commit Rule - 커밋룰에 따라 작업 내용을 확인하기 쉽도록 작성
+- [.gitmessage.txt] 파일을 작성해 커밋룰 적용
+
+### Github Flow 전략 이용 - main과 각 기능별 feat 브랜치로 구분하여 빠른 개발
+![image](https://github.com/user-attachments/assets/0f69f9a1-6e1d-4dda-95b6-4bd315c2c561)
+
 
 ## 기능 설명
 
@@ -45,4 +53,15 @@
 - **현재 정적페이지만 구현되었습니다. 추후 기능 및 JS구현 예정입니다.**
 
 ## Lighthouse 성능 지표
-## Lighthouse에서 개선한 부분
+
+![image](https://github.com/user-attachments/assets/917108ac-f051-4fdc-a56c-f200fcdb59e9)
+
+### 개선 전 Lighthouse 성능 지표
+
+![image](https://github.com/user-attachments/assets/94053249-a86a-4c09-874f-95f0be368a01)
+
+### 개선 사항
+- 버튼에 접근 가능한 이름 추가 (aria-label 추가로 해결)
+- 이미지 요소에 alt 속성 구체화
+- 선택 요소에 라벨 요소 추가
+- 문서에 메타 설명 추가