차량 관리 앱 UX/UI
서비스 기획·UX/UI
D23 · APPS · UX
제품·시연 사례제공된 제품 화면 · 예시 데이터
그룹 커뮤니티
피드·프로필·친구·그룹·마켓을 공통 탐색 구조로 묶은 커뮤니티 웹입니다. 넓은 화면의 다단 구성과 모바일의 세로 피드를 함께 설계했습니다.
- 사례
- 피드와 관심사를 연결한 커뮤니티 웹
- 수행 유형
- 제품·시연 사례
- 작업 범위
- 반응형 피드 · 댓글 UI · 프로필·친구 · 그룹·영상·마켓 탐색 · 알림·설정 화면 · 라우팅
- 자료
- 제공된 제품 화면 · 예시 데이터
사람과 콘텐츠의 관계
피드에는 작성 영역과 게시물 반응을, 프로필에는 소개·친구·게시물을 배치했습니다. 댓글 입력과 더 보기를 구성하고, 작성자 프로필과 콘텐츠를 오가는 경로를 연결했습니다. 공통 상단 탐색과 메뉴를 유지해 여러 화면을 같은 커뮤니티 안에서 이용하도록 했습니다.
목적에 맞게 달라지는 목록
그룹은 참여 중인 목록과 추천 목록으로, 영상은 주제별 카드로, 마켓은 분류와 상품 정보로 구성했습니다. 같은 탐색 틀을 사용하면서도 방문·참여·상품 탐색 등 각 화면에 필요한 정보를 다르게 배치했습니다.
모바일의 읽는 순서
넓은 화면의 다단 구성을 모바일에서는 친구·스토리·작성 영역·게시물이 이어지는 세로 흐름으로 바꿨습니다. 검색·알림·프로필 접근은 상단에 모으고, 게시물 아래 참여 도구를 유지했습니다. 클라이언트 상태와 라우팅을 기반으로 반응형 커뮤니티 화면을 제작했습니다.
PROJECT INFO
- 제작: 쿤웍스
- 제품: SNS 웹 프론트엔드 템플릿
- 기술: React · TypeScript · React Router · Vite · Tailwind CSS
비슷한 일을 준비 중이라면.이 사례 정보가 문의서에 함께 담깁니다.
MORE · APPS · UX
같은 분야의 다른 사례
우리 업무에 적용한다면.
이 사례 정보가 문의서에 함께 담깁니다.