개인 프로필 및 소셜 기능을 갖춘 SNS 서비스

Newsfeed Project

---

목차

• 프로젝트 개요
• 프로젝트 팀 구성 및 역할
• 프로젝트 수행 절차 및 방법
• 프로젝트 수행 경과
• 자체 평가 의견

---

프로젝트 개요 (1) : 프로젝트 주제 및 선정 배경, 기획의도

프로젝트 주제

• 개인 프로필 및 소셜 기능을 갖춘 SNS 서비스

선정 배경

• SNS 플랫폼을 개발함으로써 최신 트렌드와 사용자 요구를 반영한 서비스를 제공

기획 의도 및 특화 포인트

• 사용자 친화적인 플랫폼 : 사용자들이 쉽게 접근하고 사용할 수 있는 직관적인 인터페이스를 제공하여, 다양한 연령층이 사용할 수 있는 플랫폼을 목표로 함

• 상호작용 강화 : 좋아요, 댓글 등 다양한 상호작용 기능을 통해 사용자 간의 소통을 촉진하고, 커뮤니티를 활성화하고자 함

프로젝트 개요 (2) : 프로젝트 내용

프로젝트 구현 내용

• 홈 화면 : 게시물을 실시간으로 볼 수 있는 피드 구현

• 게시물 작성 화면 : 사용자가 사진을 업로드하고, 텍스트를 추가할 수 있도록 함

• 게시물 수정 화면 : 사용자가 사진을 수정하고, 텍스트를 수정할 수 있도록 함

• 프로필 화면 : 사용자가 자신의 게시물을 관리하고, 프로필 사진 등을 편집할 수 있도록 함

• 회원가입 및 로그인 : 이메일, 비밀번호를 이용한 회원가입 및 로그인 기능

• 좋아요 및 댓글 : 사용자들이 게시물에 좋아요를 누르고 댓글을 달 수 있는 기능

컨셉

• 직관적인 상호작용: 좋아요, 댓글 등 직관적이고 쉬운 상호작용 기능을 제공하여 사용자들이 편리하게 사용할 수 있도록 함
• 모던한 디자인: 깔끔하고 직관적인 인터페이스를 구현

훈련 내용과의 연관성

리액트 기본기

• 리액트 컴포넌트를 활용하여 UI를 설계하고, 상태 관리를 통해 동적인 사용자 경험을 제공
• 리액트 라우터를 사용하여 다양한 화면 간의 네비게이션을 구현

백엔드 통신

• Supabase를 사용하여 사용자 인증(Authentication) 및 데이터 저장(Database)을 처리

CSS 및 디자인 시스템

• Styled-components를 활용하여 일관된 디자인 시스템을 구축하고, 모던한 UI를 구현

프로젝트 개요 (3) : 활용 장비 및 재료

개발 환경

• 운영 체제 : Windows 10/11, macOS
• 텍스트 에디터/IDE : Visual Studio Code (VSCode)
• 버전 관리 시스템 : Git (GitHub)
• 패키지 매니저 : npm, Yarn

데이터베이스

• Supabase

프로젝트 관리 도구

• Slack : 팀 커뮤니케이션
• Figma : UI/UX 디자인 및 프로토타이핑

프로젝트 개요 (4) : 프로젝트 구조, 활용 방안 및 기대 효과

프로젝트 구조

각 기능별로 디렉토리를 분리하고, 재사용 가능한 컴포넌트를 분리하여 유지보수성을 높임. 이를 통해 팀원들이 효율적으로 협업하고, 확장성과 유지보수성을 고려한 개발을 할 수 있도록 함.

프로젝트 산출물의 기대 효과

사용자 친화적인 SNS 플랫폼 제공

• 다양한 사용자 경험 제공 : 직관적인 UI와 UX를 통해 다양한 연령층의 사용자가 쉽게 접근하고 사용할 수 있을 것
• 상호작용 강화 : 좋아요, 댓글 등 다양한 상호작용 기능을 통해 사용자 간의 소통을 촉진하고 커뮤니티를 활성화할 수 있을 것
• 콘텐츠 제공 : 사용자들에게 신선한 콘텐츠를 지속적으로 제공할 수 있을 것

---

프로젝트 팀 구성 및 역할

이름	역할	담당 업무
김민곤	팀장	로그인, 회원가입, 유저정보와 게시글 DB 세팅
김성준	팀원	마이페이지, 프로필 편집 및 수정, 마이페이지 내 사진목록과 텍스트 목록 분리
김영은	팀원	유저프로필, 유저프로필 클릭 시 해당 유저 마이페이지로 이동, 댓글 C(CRUD)
박성욱	팀원	게시글 작성페이지 Image/Content C(CRUD), 게시글 수정페이지 Image/Content U(CRUD), 게시글 작성페이지 및 수정페이지 Supabase와 DB연결
신자영	팀원	메인페이지, 헤더, 사이드바, 사용자별 기능 구현, 게시글 RD(CRUD), 댓글 RD(CRUD)
이강민	튜터	SA피드백, 진행사항 확인

---

프로젝트 수행 절차 및 방법

구분	기간	활동	비고
프로젝트 기획 및 주제 선정	5/31(월)	프로젝트의 방향성과 목표 설정, 주요 기능 및 컨셉 결정	아이디어 선정
기획안 작성	5/31(월)	프로젝트 개요 및 세부 계획 문서화, 주요 기능 및 일정 작성	기획서 완성
역할 분배	5/31(월)	팀원의 역량과 관심 분야 파악, 각자 역할 및 책임 분담	역할 정의
db 테이블 구성	5/31(월)	데이터베이스 설계, 주요 테이블 및 관계 설정	데이터 구조
와이어 프레임 구성	5/31(월)	사용자 인터페이스 초안 작성, 주요 화면 및 흐름 구성	UI 설계
공부	6/1(토) ~ 6/3(월)	자신의 역할에 따른 필요한 내용 공부	전문성 확보
Supabase 구축	6/3(월)	db 테이블에 구성에 맞게 supabase 구축	작업시작
개발	6/3(월) ~ 6/6(목)	각 역할에 맞게 작업	기능 구현
통합 및 테스트	6/6(목)	각 작업을 합치고 통합 테스트	안정성 확보
마무리	6/6(목) ~ 6/7(금)	최종 검토 및 프로젝트 마무리	최종 검토

---

프로젝트 수행 경과 (1) : 기술적 의사 결정

요구사항	선택지	핵심 기술을 선택한 이유 및 근거
css library/framework	Styled-component	동적 스타일링을 가능하게 하며, CSS 격리를 통해 스타일 충돌을 피할 수 있음. 또한, 스타일이 컴포넌트와 함께 있어 코드의 가독성과 관리성이 높아지며, 조건부 스타일링 및 스타일 확장이 용이함. 동적으로 필요한 스타일만 생성하여 불필요한 렌더링을 줄여 성능을 최적화할 수 있음.
전역상태관리 라이브러리	Redux	어플리케이션의 상태를 중앙 집중식으로 관리하여 상태의 일관성을 유지. 이는 상태를 예측 가능하게 만들고 디버깅을 용이하게 함. 상태는 불변성을 유지하여 상태 변경이 예측 가능하고 추적하기 쉬움. 또한, 컴포넌트의 재사용성을 높이고 유지보수를 용이하게 함.
Frontend	React.js	UI를 모듈화하고 재사용성을 극대화함. 이는 개발자가 독립적인 컴포넌트를 만들어 복잡한 사용자 인터페이스를 구성하기 쉽게 함. 가상 DOM을 사용하여 실제 DOM 조작을 최소화하고, 성능을 최적화함. 데이터가 변경될 때마다 전체 UI를 다시 렌더링하지 않고 변경된 부분만 업데이트하므로, 효율적인 렌더링이 가능함. React는 단방향 데이터 흐름을 유지하여 데이터 관리와 상태 추적이 용이함.
Backend	Supabase	자동으로 API를 생성하여 데이터베이스의 테이블과 상호작용할 수 있도록 하며, 이를 통해 개발자는 백엔드 코드를 작성할 필요 없이 데이터를 쉽게 처리할 수 있음. 또한, Supabase는 실시간 기능을 제공하여 데이터 변경 사항을 실시간으로 반영할 수 있어, 실시간 애플리케이션 개발에 유리함. 인증 및 사용자 관리를 내장하고 있어, 사용자 인증 및 권한 관리를 간편하게 처리할 수 있음. Supabase는 스토리지 기능도 제공하여 파일 업로드 및 관리를 지원하며, 이는 통합적인 데이터 관리 솔루션을 제공함.

프로젝트 수행 경과 (2) : 개발 프로세스

1. 프로젝트 기획 단계

1.1 아이디어 구상 및 주제 선정

• 아이디어 브레인스토밍 : 팀원들과 함께 SNS 플랫폼 아이디어를 구상.
• 주제 선정 : 사용자 친화적인 인터페이스, 상호작용 강화, 개인화된 경험 제공을 목표로 하는 SNS 플랫폼 개발 결정.

1.2 요구사항 분석

• 핵심 기능 정의 : 회원가입 및 로그인, CRUD, 마이페이지, 배포 등
• 타겟 사용자 분석: 다양한 연령층의 사용자 대상

1.3 기술 스택 선정

• 프론트엔드 : React, Redux, React Router
• 백엔드 : Supabase
• 스타일링 : Styled-components
• 버전 관리 : Git 및 GitHub
• 배포 : Vercel

2. 설계 단계

2.1 UI/UX 디자인

• 와이어프레임 및 프로토타입 설계 : Figma 사용
• 사용자 인터페이스 디자인 및 사용자 경험 최적화 : 직관적인 UI 설계

2.2 아키텍처 설계

• 컴포넌트 구조 설계 : 재사용 가능한 컴포넌트 설계
• 디렉토리 구조 설계 : 모듈화된 디렉토리 구조 정의

3. 개발 단계

3.1 환경 설정

• 리액트 앱 초기화 : yarn create vite 사용
• 개발 도구 설정 : ESLint, Prettier, Git hooks 설정

3.2 프론트엔드 개발

• 홈 화면 구현
• 로그인 화면 구현
• 프로필 화면 구현
• 게시물 작성 및 수정 화면 구현

3.3 백엔드 개발

• Supabase 설정 : Supabase 프로젝트 생성 및 Authentication 설정

프로젝트 수행 경과 (3) : 트러블 슈팅 및 유저테스트

1) 회원가입시 이미지 데이터 저장 및 불러오기 문제 - 김민곤

[상황]

회원가입시에, 프로필 이미지를 저장하고 바로 화면에 보여줘야 했음. 하지만 이미지 깨짐 현상과, 유저 정보에 이미지 url 주소가 입력되지 않았던 문제가 있었음.

[원인]

supabase storage에서 getPublicUrl()을 사용할 때 객체로 한 번 묶어져서 나온다는 사실을 인지하지 못하고 사용하여 잘못 정보가 입력되었음.

[해결]

return되는 값인 data에서 data.publicUrl로 변경함. 따라서 필요했던 url 주소값이 제대로 저장되었고, 이미지가 온전하게 랜더링 되었음.

2) user 정보를 이용하여 supabase userInfo 테이블에서 가져온 정보가 각각의 프로필에 연동되지 않는 문제 - 김영은

[상황]

로그인한 유저의 id값을 사용하여 해당 테이블에 있는 정보들을 받아왔는데 모든 유저의 프로필이 로그인한 유저의 프로필로 나타나는 상황

[원인]

supabase.auth.getUser를 통해 로그인한 유저의 정보를 가지고 오며, "await supabase.from('userInfo').select('*').eq('id', userId)"를 이용해 유저의 정보를 가져와 전달해줌.

[해결]

supabase.from('userInfo').select('*').eq('id', userId).single();

supabase 공식문서를 참고하여 single();을 추가작성하여 단일유저의 정보만 가져올 수 있도록 변경하여 각 요소에 필요한 Id를 전달 할 수 있었음.

3) Supabase DB에 동일한 파일 존재 - 박성욱

[상황]

게시물 작성 페이지와 수정 페이지에서 파일 업로드를 하는 과정에서 에러발생

[원인]

Supabase 저장소에 동일한 이름의 파일이 이미 존재할 때 발생하는 에러

[해결]

작성 페이지와 수정 페이지에서 파일 업로드 시 파일 이름에 타임스탬프를 추가하여 파일을 고유하게 만들어 해결함

4) image_url을 통한 이미지 미리보기가 안되는 문제 - 박성욱

[상황]

작성 페이지에서 업로드한 이미지를 수정 페이지에서 미리보기 하고 싶은데 img src값을 통한 미리보기가 되지 않고 alt값이 출력되는 문제 발생

[원인]

src에 preview가 출력되도록 했는데 preview에 저장되는 img_url이 중복되어 이상하게 저장됨.
ex) https://sdfaf/sfdsa 로 저장되어야할 것이 https://sdfaf/sfdsa/https://sdfaf 이런식으로 링크가 중복되어 저장됨.

[해결]

Supabase에서 받아온 img_url링크가 preview에 직접 저장되도록 하여 해결함

프로젝트 수행 경과 (4) : 영상

프로젝트 수행 영상

---

자체 평가 의견 (1) : 프로젝트 결과물에 대한 완성도평가

이름	평가 점수(10점 만점)	평가 점수 사유
김민곤	8점	필수 기능 구현을 했으나 유효성 검사 하는 부분에서 디테일 하게 구현하지 못했으며, 조장으로서 전체적인 코드 및 파일 구조를 팀원들과 제대로 공유하지 못했던 것 같다.
김성준	0.5점	필수 기능 구현도 제대로 못했고 아직도 리액트를 절반도 이해를 못한 것 같다. 아직도 뭘 모르는지 모르겠다.
김영은	6점	필수 기능 구현을 완료하였지만 혼자서 문제해결까지의 시간이 많이 소요되어 계획했던 도전과제를 해내지 못한 아쉬움이 있다.
박성욱	6점	프로젝트 초반에 이해도 부족으로 컴포넌트 분리를 생각하지 않고 개인적으로 맡은 부분의 페이지를 제작하여 프로젝트 후반에 오류 관리에 있어서 어려움을 겪었기에 아쉬움이 남는다.
신자영	7점	프로젝트가 SNS이다 보니 다양한 기능을 추가해 풍성하게 보이도록 하고 싶었지만, 시간적 제약과 기술적 한계로 인해 너무 많은 욕심을 부렸다는 아쉬움이 든다.

자체 평가 의견 (2) : 팀 종합평가

김민곤

• 팀원분들이 포기하지 않고 끝까지 따라와주셨다.
• DB 연동 과정에서 많은 시간을 허비해 원하는 만큼의 결과물을 만들지 못했다.
• 팀원들과의 소통이 얼마나 중요한지 알게되었다.
• Supabase로 CRUD 구현하는 방법을 제대로 알게되어 기쁘다.

김성준

• 우리 팀은 사전에 소통도 너무 잘됐고 준비도 잘했다고 생각하는데 내가 맡은 바에 있어서 이해도가 거의 없었던 것 같다.
• 아쉬운 점은 내 머리, 내 이해도
• 나는 이해력이 너무 많이 후달린다,,, 남들보다 100배는 더 노력해야겠다...
• 진정한 자기 객관화가 된 것 같다.

김영은

• 소통이 원활하게 이루어져 문제를 잘 해결했다.
• 초기 계획했던 도전과제를 시간상의 문제로 구현하지 못해 아쉽다.
• 문제에 부딪히면서 많은 것을 배울 수 있었다.

박성욱

• 프로젝트 진행 전 프로젝트 규칙 (github rules 등)을 확실하게 정하고 시작하여 협업에 있어서 유리했다.
• 초반에 개인적인 이해도 부족으로 개인 과제에서 컴포넌트를 분리하지 않아서 오류 수정에 어려움을 겪었던 것이 아쉬움으로 남는다.
• 내가 알든 모르든 문제 상황에 직면해보면서 배운 것이 많았다.

신자영

• 시간적으로도 내가 할 수 있는 기술적인 면이 부족해서 하고 싶은건 많은데 아쉬웠다.
• 프로젝트의 성공적인 완료를 위해서는 팀원 간의 협력이 무엇보다 중요하다는 것을 깨달았다.

자체 평가 의견 (3) : 프로젝트 종합평가

개선점

• 다크 모드 지원 : 사용자 선호도를 고려하여 다크 모드 옵션을 추가하면 사용자의 눈 피로를 줄일 수 있을 것이다.

• 검색 기능 강화 : 게시물, 사용자, 해시태그 등을 더 효율적으로 검색할 수 있도록 검색 알고리즘을 개선할 수 있을 것이다.

• 더 직관적인 디자인 : 사용자 피드백을 반영하여 UI 요소의 위치와 디자인을 조정할 수 있다. 특히, 초기 사용자들이 혼란스러워할 수 있는 부분을 개선하여 더 직관적인 인터페이스를 제공할 수 있을 것이다.

보완점

• 반응형 디자인 개선 : 다양한 디바이스에서 최적화된 경험을 제공하기 위해 더 철저한 반응형 디자인을 구현할 수 있을 것이다.

• 사용자 피드백 시스템 : 사용자들이 피드백을 쉽게 제출하고, 이를 바탕으로 기능 개선을 할 수 있도록 피드백 시스템을 강화할 필요가 있다.

• 프라이버시 관리 : 사용자들이 자신의 데이터와 프라이버시 설정을 더 쉽게 관리할 수 있도록 개선할 필요가 있다.