Skip to content

kusitms-com/29th_Meetup_TeamA_SchoolPoint_Front

Repository files navigation

👨‍🏫 스쿨포인트, School Point

학부모님, 쏟아지는 교육 정보의 홍수 속에서 불편하셨나요?
우리아이 학교소식 스쿨포인트(School Point)에서 한눈에 보세요!

사이트 링크: https://www.schoolpoint.site/
교사 사이트 링크: https://teacher.schoolpoint.site/

image


🐥 ASAP

image

팀명: ASAP

매일같이 쏟아지는 학교 소식을 제일 쉽고 빠르게 전달하고 싶은 우리 팀의 비전을 담았습니다.

R&R

분야 이름 포지션
기획 김동우 💡 프로젝트 매니징, 유저 리서치, 문제 정의 및 솔루션 제시, 와이어 프레임, 세부기능기획
기획 김규리 📊 서비스 기획, 데스크 리서치, 와이어 프레임, 세부기능기획, 비즈니스모델 설계
기획 오민지 📑 서비스 기획, 와이어 프레임, 유저 리서치, 세부기능 기획, 경쟁사 및 시장 조사
디자인 임승현 ✏️ 디자인 시스템 구축, 캐릭터 디자인, UX/UI 디자인
디자인 최은정 🎨 디자인 리드, 디자인 시스템 구축, 캐릭터 디자인, UX/UI 디자인, 서비스 무드보드 작성
개발 박예진 📺 Front-End, 개발 리드, 웹 화면 UI 구현, 서버 연동
개발 유진주 🖥️ Front-End, 웹 화면 UI 구현, 서버 연동
개발 심규민 💾 Back-End, 개발 리드, 서버 배포 및 ERD 설계, API 설계
개발 윤소민 🔌 Back-End, 서버 배포 및 ERD 설계, API 설계

👩🏻‍🏫 서비스 개발 배경

스쿨포인트의 PM인 저는 2022년부터 총 4차례 초등학교에서 교생실습을 했던 교대생입니다.
하루는 교생실습 도중 초등학교에서 진행중인 풍물반 프로그램이 궁금해 가정통신문을 살펴봤습니다. 그러나 가정통신문의 모바일 환경에 부적합한 문서 양식부족한 가독성으로 인해 핵심 내용을 파악하기 어려웠습니다. 바쁜 와중에 매일매일 휴대폰으로 해당 정보들을 열람하는 교육 주체인 '학부모님'들은 일상에서 피로감을 겪을 것 같았습니다. 이와 같은 문제를 IT 서비스로 풀어보고자 교육, IT, 비즈니스 세 분야에 관심 많은 학생들이 모여 ASAP 팀을 만들게 되었습니다.


🔎 목적 및 필요성

스쿨포인트는 학부모님들이 온라인 환경에서 학교 소식을 전달받는 과정에서 발생하는 어려움을 해결하고자 하는 목적을 지닌 서비스입니다.

구체적으로는 가정통신문, 알림장, 주간학습안내, 급식 정보 등의 정보들이 학부모님에게 전달되는 과정에서 발생하는 비효율적인 상황들에 주목합니다. 이를 해결하기 위해 이미지 속 텍스트를 디지털화하는 OCR 기술, 텍스트를 자동 요약해주는 생성형 AI 등을 활용하여 학부모 친화적인 UI/UX를 제공합니다. 최종적으로는 자녀 등교 준비에 있어 편리한 환경을 조성하여 학부모님들의 주체적인 학교 참여 문화를 만들고자 합니다.
모든 학부모님들이 학교 소식에 관심을 갖는 날까지 스쿨포인트는 계속됩니다.


🎯 문제 정의 및 솔루션 도출

image

Problem Segment 1.

쏟아지는 교육 정보로 인한 학부모 피로도 증가

코로나19 이후 언택트로 인해 학교 교육 현장은 크게 변화되었습니다. 종이 대신 모바일로 가정통신문과 알림장을 전달하는 학교가 늘어났습니다. 가정통신문, 알림장을 비롯한 다수의 학교 소식들은 매일 학부모님들에게 온라인으로 전달되고 있습니다.

Untitled

자체 유저 리서치(초등학생 학부모님 19명 대상)에서는 무려 94.7%의 초등학생 학부모님들이 어플을 통하여 알림장을 열람한다고 답변했습니다. 또한 78.9%의 학부모님들은 주로 학교 알리미 어플(ex 아이엠스쿨, e알리미 등)을 통해 학교 소식을 받고 있었습니다.

image

그러나 57.9%의 학부모님들은 학교 어플로부터 오는 여러 개의 알림으로 인해 꼭 답해야 할 알림장/가정통신문 내용을 놓쳐본 경험을 갖고 있었습니다. 뿐만 아니라 유저 인터뷰(학부모님 3명 대상)를 통해서 ‘여러 학교 어플로부터 오는 중복 내용 알림’에 대한 페인 포인트도 발견할 수 있었습니다.


무분별하며 방대한 학교 알리미 어플 알림

처음엔 자녀 학교 소식을 기억하기 위해 어플을 이용했지만, 현재는 아이러니하게도 수많은 알림으로 인해 중요한 소식을 놓치는 것과 같은 혼란을 겪고 있는 상황입니다. 다시 말해 학부모님들은 무분별하며 방대하게 쏟아지는 교육 정보 속에서 중요한 학교 소식을 파악하는 데 어려움을 겪고 있었습니다.














Problem Segment 2.

학부모에게 불친절한 교육 공공데이터

image

가독성 부족하며 모바일 형식에 부적합한 가정통신문

초등학교에서 학부모님들에게 가정통신문을 전달할 때 위와 같은 방식으로 hwp, pdf 파일을 전달합니다.
학부모님들은 학교 알리미 어플(모바일 알림장)로 가정통신문을 확인합니다. 하지만 다음과 같은 전달 방식은 가독성이 부족하여 모바일 환경에서 내용을 이해하는 데 불편함을 가져옵니다.
실제로 자체 리서치에 따르면 학부모님들은 예시 가정통신문의 가독성을 평균 4.8점(10점 만점)의 점수로 평가했습니다.






























학부모 회신 요구되는 항목 파악 어려운 알림장

알림장에는 오늘 공부한 내용, 숙제, 안전 지도, 행사 안내, 격려, 생활 지도 등 다양한 내용이 담겨 있습니다.
그 중에서 학부모님이 꼭 알아야만 하는 내용은 설문조사 또는 구강검진과 같은 회신이 요구되는 항목입니다. 그런데 위와 같은 알림장 형식이 매일같이 전달되는 상황 속에서 회신 요구 항목만 기억하는 것은 어렵습니다. 유저 인터뷰를 통해서도 “초등학생 애들이 여러 명인 집이나, 아이들을 케어하느라 바쁘면 가끔 학교에서 회신하라고 하는 통신문을 놓치는 경우가 있다” 와 같은 답변에서 알림장 관련 페인 포인트를 찾을 수 있었습니다.














가정 학습 연계 불가능한 주간학습안내

주간학습안내는 한 주동안 학급 학생들이 국어, 수학을 비롯한 다양한 교과목에 대해 어떤 내용을 공부하는지 알 수 있는 자료입니다.
그러나 학부모님들께서 해당 자료를 토대로 학생들이 실제로 어떤 내용을 배우는지 이해하는 건 어렵습니다. 주간학습안내에 적힌 학습목표와 진도에 대한 단순 정보만으로 구체적인 학습 내용은 파악이 어렵기 때문입니다.















💡 솔루션

🏫 Solution 1. 학교 소식에 최적화된 UI/UX로 교육 정보 과잉에 대한 학부모 피로도 경감

🏫 Solution 2. AI를 활용한 학부모 친화적 학교 소식 제공

학부모 피로도의 원인은, 알림이나 광고성 정보 등 ‘쏟아지는 교육 정보’라는 것을 발견했습니다. 양육법, 체험 캠프 등 교육 정보의 유형은 다양합니다. 그 중에서도 스쿨포인트는 ‘학교 소식’에 집중하여 지친 학부모님을 위한 편리한 서비스를 만들 것입니다. 세부적으로 알림장, 가정통신문, 주간학습안내 등과 같은 정보 열람에 최적화된 UI/UX를 제공합니다.

다음으로 기존에 불친절했던 교육 공공 데이터 문제를 해결하고자 CLOVA OCR, Chat GPT를 사용합니다. 가정통신문, 주간학습안내 이미지 속 텍스트를 디지털화하여 학부모 친화적으로 정보를 재가공했습니다. 학부모님들에게 AI 가정통신문 핵심 문장 요약, 주간학습 데이터 기반 가정 연계 학습 정보 등을 전달하여 전무후무한 온라인 알림장 플랫폼으로 자리매김할 것입니다.


📊 리서치 및 시장조사

1️⃣ 경쟁사 분석

최근 많은 학교 현장에서 학부모와의 소통을 위해 학교 알리미 어플을 사용하고 있습니다. 특히, 초등학교의 경우 학교 알림 어플 가입률이 99%에 달하며, 이는 자녀의 학업과 등교 준비를 수월하게 돕는다는 긍정적인 평가를 받고 있습니다. 학교 알리미 어플은 종이 알림장을 대신하여 가정통신문 및 학사정보와 학급 소식을 각 가정으로 전달하는 역할을 수행하고 있습니다.

스쿨포인트 하이클래스 아이엠스쿨 E알리미
서비스 소개 ‘우리 아이 학교소식 핵심 콕콕’

교육 공공데이터를 기반으로 학교 소식의 핵심만 간결하게 제공해요!
“똑똑한 학급소통앱’

학급 운영에 필요한 알림장, 게시판 기능 + 교사 학부모간 소통을 위한 하이콜, 하이톡 등의 커뮤니티 서비스 제공
‘우리 아이 교육 정보를 한 눈에’

학교 소식과 함께, 교육에 필요한 모든 정보 및 콘텐츠 제공
‘세상 모든 알림의 시작’

학교, 기업, 단체, 공공기관을 위한 효과적 공지 전달을 위한 스마트 공지 애플리케이션
핵심 기능 - AI 가정통신문 요약
- 학부모 투두리스트 연동
- 학교 진도와 연동된 과목별 학습 콘텐츠 제공
- 알림장, 앨범, 과제 게시판
- 교사와 학부모 간 소통 창구 : 하이콜, 하이톡
- 급식, 가정통신문, 알림장
- 추천 도서 / 추천 교육
- 주변 학원 정보
- 실시간 수신 및 열람 확인
- 통계 및 엑셀 출력 가능
교육 정보 범위 학급 기반 학급 기반 학급 + 학교 위주 소식 교육(학원+학교) 전체 학교 위주 소식
광고성 콘텐츠 광고 없음 ☺️
- 자녀의 교육과 학교 생활 현황에만 집중할 수 있는 관여도 높은 정보만 제공
많음 🤔
- 시작 팝업 배너
- 페이지별 띠 배너
- 홈 빅 배너
매우 많음 😥
- 시작/종료 팝업
- 이벤트 푸시
- 하단 배너
- 피드 배너
- 네이티브 애드
광고 없음 🙂
콘텐츠 종류 - 학교 주간학습과 연계된 실질적인 학습 진도에 맞춘 자체 제작 학습 콘텐츠 제작

- 자녀의 학교와 학급 진도 기반에 맞춘 가정 연계 교육 콘텐츠를 제공해주기 때문에 관심 및 관여도가 높을 것으로 예상
- 육아정보(맘튜브)
- 교육정보
- 생활 정보
- 리프레시

등 자녀의 학교 생활과는 연관성이 높지 않은 단순 홍보성 콘텐츠가 많은 편
- 입시 고민
- 교육 백과
- 초.중.고 학부모
- 우리 사는 이야기
- 질문 톡톡톡

카테고리별 사용자 기반의 커뮤니티가 활성화되고 있음

필수적인 교육 정보나 학교생활보다는 학부모 간 양육 고민 및 질문 등이 오가는 콘텐츠 위주
X
정보 전달 방식 및 사용성 평가 사용성: 높음 🙂

- 가정통신문 요약과 원문 제공
- 회신 필요 가통 리마인드 기능
- 학부모 투두 연동
사용성 : 보통 🤔

- 가정통신문 원문 업로드
- 미제출된 문서의 경우, 교사가 학부모에게 리마인드 가능
사용성 : 보통 🤔

- 가정통신문 원문 업로드
사용성: 낮음 😥

- 가정통신문 원문 업로드
- 일방향 정보 제공
미확인/열람 안내에 대한 리마인드/알림 서비스 O O O O
서비스 자체 학부모용 투두 관리 O X X X
가정통신문 요약 기능 O X X X

그러나, 현존하는 서비스는 아래 두 가지와 같은 문제점을 가지고 있습니다.

① ‘사교육 광고를 비롯한 여러 광고성 콘텐츠’가 지나치게 게재되어 있습니다.

② 매일 쏟아지는 알림과 정보의 홍수 속, 학부모가 피로감을 호소하고 있다는 점입니다.

따라서, 우리 서비스는 ‘필요한 정보만을 쉽고 빠르게’ 제공하는 서비스로 포지셔닝하고자 합니다.


image 포지셔닝은 정보 파악의 편리성과 일정/투두 관리의 용이성이라는 기준을 축으로 잡아 설정하였습니다

image

타 유사 경쟁사 서비스와 ‘스쿨 포인트’를 비교 및 분석해본 결과,
스쿨 포인트는 아래와 같은 차별점을 가지고 있다는 것을 발견할 수 있었습니다.

차별성 1. ‘학부모님 입장’에서 받아보고 싶은 정보만 쉽고, 빠르게

  • 장문의 가정통신문, 힘드셨죠? 저희가 요약해서 핵심만 알려드릴게요!
  • 알림이 너무 많진 않으셨나요? 필수적인 알림만 뽑아서 리마인드 해드릴게요 😊
  • 오늘 나오는 급식, 우리 아이 알레르기 유발 성분은 없는지 맞춤으로 체크해드려요 😃

기존 학교 알림 서비스가 학부모에게 학교 소식 정보를 쏟아내고 있는 상황을 보완하기 위해, 스쿨포인트는 학부모님들에게 가장 쉽고 빠르게 ‘핵심 정보’만 전달 드릴 수 있는 것에 집중해요


차별성 2. 우리 아이 학교 일정 관리, 이제는 스쿨포인트에서

  • 학교 일정과 알림장 내용을 바탕으로 학부모님의 ‘오늘의 투두’를 자동 생성해드려요

기존의 학교 알림 서비스가 ‘학교 소식’ 혹은 ‘교육 정보’를 제공하는 것에 집중했다면 스쿨포인트는 단순 정보 제공의 수준을 넘어서 자녀 학교 일정 관리에 대한 편리한 경험을 제공하는 것을 지향해요


2️⃣ 목표 시장

학령 인구를 토대로 학부모 인구 규모를 예측하여 유효한 사용자 범위를 설정하고 그 중 현존하는 유사 서비스에 불편함을 겪고 있는 즉, 스쿨포인트를 통해 양질의 학교 소식을 더욱 빠르고 편하게 받아볼 의향이 있는 사람들을 수익 시장으로 설정하였습니다.

image


3️⃣ 유저리서치 분석

유저 리서치 목적 설정

image

유저 보이스를 바탕으로 문제 정의에 대한 객관적인 근거를 얻고자 초등학생 학부모님 대상 설문조사(n=19)를 실시했습니다. 체계적인 설문조사 문항 설계를 위해 질문들을 알림장, 가정통신문, 학교 알리미 어플, 학급/학교 생활, 타 학부모님과의 소통, 교육정보, 숙제지도라는 총 7가지 카테고리에 따라 구분했습니다. 이어 각각의 항목으로부터 어떤 정보를 수집하여 서비스와 직접적인 연계를 하고 싶은지 정리해봤습니다.


설문조사 결과 개요

image


주요 카테고리별 설문조사 결과

A. 알림장

  1. 자녀 알림장을 확인하는 시점 image

47.4%의 학부모님들은 알림장을 자녀 하교 직후에 확인하고 있었습니다. 그리고 42.1%의 학부모님들은 알림장을 늦은 오후에 확인하고 있었습니다.

  1. 알림장을 어떤 수단으로 확인하는지 (종이/앱) image

학부모님 약 95%는 알림장을 앱을 통하여 확인하고 있었으며, 학부모님 약 80%는 가정통신문을 앱을 통하여 확인하고 있었습니다.

B. 가정통신문

  1. 학교 가정통신문을 전달받으면 어느 정도의 내용을 읽는지 image

학부모님 36.8%는 학교 가정통신문을 읽을 때 제목으로 내용 파악 후 일부만 읽고 있었습니다. 또한 10.5%의 학부모님들은 구강검진 확인서와 같은 회신이 필요한 내용만 읽고 있 었습니다.

  1. 가정통신문 가독성에 대한 평가 image

학부모님들은 현재 가정통신문 형식의 가독성을 평균 4.8점(10점 만점)으로 평가했습니다.

C. 학교 알리미 어플

  1. 학교 알리미 어플을 통해 가장 먼저 확인해 보는 정보 image

학부모님들은 학교 알리미 어플을 통해 학급 알림장(94.7%), 가정통신문(94.7%)을 가장 먼저 확인하고 있었습니다.

D. 학급/학교 생활

  1. 가장 중요하다고 생각하는 학교 정보의 유형 image

학부모님들은 학급 알림장(94.7%), 가정통신문(63.2%), 학급 일정(63.2%)을 가장 중요한 학교 정보라고 인식하고 있었습니다.

E. 교육 정보

  1. 어떤 경로를 통해 자녀 교육 정보를 얻는지 image

초등학생 학부모님들은 대부분(78.9%) 교육 알리미 어플을 통해 자녀 교육 정보를 얻고 있었습니다.

  1. 원하는 교육 정보를 찾는 과정에서 겪은 어려움 image

학부모님들은 광고성 정보(36.8%), 자녀 상황과 부적합한 정보 추천(21.1%) 등으로 인해 원하는 교육 정보를 찾는 데 어려움을 겪고 있었습니다.

유저 인터뷰 결과 및 User Definition

image

설문조사에 더하여 초등학생 학부모님 대상 심층 인터뷰(n=3), 초등교사 대상 심층 인터뷰(n=3)를 실시했습니다. 유저 인터뷰 결과와 전체 리서치 과정에 대한 핵심 인사이트를 위와 같이 도출했습니다.


👀 서비스 타겟층 정의

1️⃣ 페르소나 설정

image

스쿨포인트를 이용할 가상의 사용자, 페르소나를 위와 같이 설정했습니다. 여러 자녀를 키우고 있으며 학교 알리미 어플을 사용하고 있다는 설정을 통해 페인 포인트와 니즈를 뾰족하게 도출할 수 있었습니다.


2️⃣ 저니맵(사용자여정지도)

image

학부모님의 하루에 가장 크게 관여하는 이벤트는 바로 ‘자녀 등교’입니다. 따라서 저희는 자녀 등교 전, 자녀 하교 후라는 시간적 흐름에 따라 고객 여정을 위와 같이 정리해봤습니다. 학습/등교 준비 전반에서 발생하는 학부모님의 니즈를 스쿨포인트의 기능들로 충족하여 효율적인 등교 준비로 이끌 수 있겠다는 확신을 갖게 됐습니다.


3️⃣ 타겟 분류

image

스쿨포인트의 목표 타겟은 전국 초등학생 3050 학부모이며 추후 서비스 확장을 통해 다문화 가정의 초등학생 학부모에게 ‘다국어 번역 기능’을 제공함으로써 글로벌 학교 소식 알리미 어플로서 포지셔닝하고자 합니다.


2차 타겟층으로 다문화 학부모를 선정한 이유

  1. 유저 인터뷰 과정에서 얻은 인사이트
  • 교사 인터뷰를 통해 기존 학교 알리미 앱 E알리미가 온보딩 과정에서 다양한 가정형태를 고려하지 않는다는 점을 확인
  • 학부모 인터뷰를 통해 특히 다문화 가정의 경우 자녀 학교생활과 관련해 도움을 청할 곳이 많이 없어 고충이 더 크다는 점을 확인
  1. 데스크 리서치를 통한 인사이트
  • 다문화 가정 학생 수는 2023년 18만으로 집계, 2025년 20만으로 예측되어 시장 자체의 확장성을 확인
  • 설문 결과 다문화 가정 학부모의 50.4%가 학습 지도 및 학교생활 관리의 어려움을 자녀 양육에서의 가장 큰 고충으로 꼽음.

💡 서비스 소개

개요

스쿨포인트는 ‘초등학생 학부모들’이 겪고 있는 ‘매일 쏟아지는 학교 소식에 대한 피로감과 낮은 가독성으로 인한 내용 이해의 어려움’ 문제를 ‘필수 정보 강조 및 AI를 통한 핵심 요약’ 방식을 통해 해결하고자 합니다.

핵심 기능

image


정보 구조도 (IA)

image



📊 서비스 비즈니스 모델

image

관련 파트너 1 관련 파트너 2 내용
중개 수수료 모델 스쿨포인트 기업 스토어에 입점된 상품의 거래 성사 시 판매가의 4%를 스쿨포인트에 수수료로 납부
광고료 모델 스쿨포인트 기업 스토어 페이지 상단 배너에 광고 집행 시 스쿨포인트에 광고비 납부
프리미엄 구독 모델 스쿨포인트 유저 과목별 학습 팁 추가 열람 희망 시 스쿨포인트에 구독료 납부

- 무료 이용 시: 매주 2개 과목의 학습 팁 확인 가능
- 프리미엄 이용 시: 매주 전 과목 학습 팁 확인 가능



📈 Mile Stone

image 스쿨포인트는 우선적으로 OCR 기술, AI 등을 이용해 모든 가정통신문에 대한 회신 절차를 디지털화하는 것이 목표입니다. 이어 주간학습 데이터를 기반으로 커머스 BM을 활성화시켜 교육적인 측면을 고려하는 플랫폼이 될 것입니다. 마지막으로 다문화 가정 학부모 대상 플랫폼으로 서비스를 확장하여 모든 가정에서 학교 소식을 편리하게 열람할 수 있는 환경을 조성할 예정입니다.


🎨 무드보드, 디자인시스템

1️⃣ 무드보드

image

2️⃣ 디자인시스템

image


🔍 System Architecture

image


📜 ERD 설계도

image


💻 Technology

Web

  • Next.jsTypeScript
  • React-Query Axios Redux Styled-Components Storybook

Server

  • IntelliJ IDEA Kotlin Springboot Shell Script Gradle Spring Data JPA JWT
  • MySQL Hibernate
  • GitHub Actions Docker Nginx

Co-working Tool

  • Slack Notion

🐾 기술 스택 선정 이유

📘 Web 스택 선정 이유

  • Next.js
    저희 프로젝트는 서비스 배포 후 실 운영 및 수익화를 목표로 하고 있습니다. 따라서, SEO를 통한 검색 엔진 노출에 강점이 있는 Next.js를 기술 스택으로 선정하였습니다. 첫 로딩이 오래 걸리고 SEO에 취약한 Client Side Rendering 환경의 React와 달리, Next.js는 기본적으로 모든 페이지를 pre-rendering을 통해 미리 데이터가 렌더링된 페이지를 가져오므로 사용자에게 더 좋은 UX를 제공합니다.

  • TypeScript
    Javascript로 코드를 작성할 때는 객체의 필드나 함수의 매개변수로 들어오는 값이 무엇인지 알기 위해 여러 파일들을 살펴야 한다는 단점이 있습니다. Typescript의 경우 변수의 이름뿐 아니라, 그 데이터의 자료형까지 알 수 있어 코드 작성을 쉽고 직관적으로 할 수 있습니다. 또한, 추후 리팩토링을 할 경우 타입 에러를 방지할 수 있어 생산성 측면에서도 큰 이점을 가지기에 선정하게 되었습니다.

  • styled-components
    CSS를 컴포넌트로 관리하여 렌더링 구문에서 컴포넌트 이름만 노출되기에 가독성이 좋고 컴포넌트 이름으로 기능과 스타일을 유추할 수 있습니다. 또한, Next(React) 환경에서는 props를 활용한 조건부 스타일링이 가능하며, styled-component 스타일을 상속받아 코드의 재사용성을 높일 수 있어 선정하게 되었습니다.

  • redux-toolkit
    redux는 가장 신뢰성 있고 안정된 라이브러리로, Redux Devtools를 이용해 직관적으로 상태를 볼 수 있는 방법 또한 제공합니다. 따라서 프로젝트를 점차 확대하며 전역 상태값이 많아질 경우, 디버깅이 상대적으로 recoil에 비해 더 편리할 것이라는 생각으로 본 기술을 채택하게 되었습니다. recoil 보다는 작성해야 할 코드의 양이 많다는 단점이 있으나, redux-toolkit의 사용으로 기존 리덕스의 불필요한 코드를 줄일 수 있습니다. 또한. thunk를 사용해 비동기작업을 보다 쉽게 관리할 수 있습니다.

  • storybook
    협업시, 팀원이 개발 중인 컴포넌트를 문서로 파악하기 위해 선정하였습니다. storybook은 UI가 실제로 어떻게 작동하는지 컴포넌트를 독립적으로 개발하고 테스트할 수 있어 프로젝트의 복잡성을 줄일 수 있었습니다. 컴포넌트의 문서화가 자동으로 되고, 컴포넌트의 각 상태를 별도의 스토리로 관리할 수 있어 다양한 story를 팀원과 쉽게 시뮬레이션하고 테스트할 수 있어 선정하게 되었습니다.

  • framer-motion
    애플리케이션 내에서 요소들의 움직임, 변화, 애니메이션 효과를 만들기 위해 선정했습니다. 다양한 기능과 직관적인 API를 제공하여서 러닝커브가 타 라이브러리에 비해 낮고, 커스텀에 용이해서 부드러운 애니메이션 및 모션을 만들 수 있어 선정하게 되었습니다.

📗 Server 스택 선정 이유

  • spring boot
    현재 Jvm 생태계에 익숙한 개발자들로 이루어져있습니다. 그래서 주요 프레임워크를 jvm 기반 프레임 워크들 중 고민하게 되었습니다. 이 중, spring은 레퍼런스도 많고 현재 학습이 많이 진행된 상태이기 때문에 주요 프레임워크로 선정했습니다. 특히, spring boot의 경우 spring관련 라이브러리의 의존성을 자동으로 설정해주기 때문에, 개발 효율성을 높이기 위해 spring boot를 선정하게 되었습니다.

  • kotlin
    현재 백엔드 개발자들은 자바를 이용하여 여러 프로젝트를 경험해 왔습니다. 하지만 자바를 사용하면서 경우 과도한 롬복 적용과 null처리에 지원 미흡, 그리고 객체 생성에 있어 필드 명시를 할 수 없음에 불편함을 느끼던 와중, 해당 문제를 언어적 차원에서 해결해주는 코틀린을 알게 되었습니다. 코틀린의 경우 자바기반으로 만들어진 언어이기 때문에 자바 코드로 쉽게 변환이 가능합니다. 이러한 점에서 학습 곡선이 완만하고 생각되어 주 언어로 선정하게 되었습니다.

  • jpa
    spring 진영의 영속성 프레임워크와 코틀린 진영의 영속성 프레임워크들이 다수 존재합니다. 이 중 자동으로 테이블을 생성해주며 메소드 이름을 통해 쿼리를 작성할 수 있으며, 추가로 spring과의 쉬운 통합을 지원하며 해당 프레임워크에 대해 학습이 진행되었기에 Spring Data JPA를 영속성 프레임워크로 선정하게 되었습니다.

  • MySQL
    데이터베이스 선정 과정에서 쉬운 사용의 MongoDB와 기존에 사용해오던 MySQL을 고민하게 되었으며 최종적으로 MySQL을 사용하기로 결정했습니다. 그 이유는 MongoDB와는 다르게 MySQL의 경우 학교에서 전공시간에 학습을 하였으며, 트랜잭션을 통해 ACID를 기본으로 지원하기 때문에 선정하게 되었습니다.

  • docker
    도커의 경우 협업에 있어 개발자들의 환경과 운영, 배포 환경을 통일할 수 있는 컨테이너 기술입니다. 특히, 컨테이너를 통해 애플리케이션을 관리하게 되면 기존 애플리케이션 실행과는 다르게 애플리케이션의 상태를 쉽게 확인할 수 있으며, 이미지를 통한 손쉬운 배포가 가능하기 때문에 선정하게 되었습니다.


🔖 Naming Rules

🖥️Frontend

  • component : PascalCase
    • 최상위 태그 : -Layout
    • 차상위 태그 : -Container
  • constant : SNAKE_CASE
  • 변수 : camelCase
  • Interface
    • props : PascalCaseProps
    • api response : PascalCaseResponse

💻Backend

  • Packages
    • 항상 소문자로 생성하기
  • Classes
    • 명사여야 한다.
    • 복합 단어의 경우 각 단어의 첫글자는 대문자.
    • 완전한 단어를 사용하고, 두 문자어와 약어는 피한다.
  • Interfaces
    • 인터페이스 이름도 클래스 이름과 같은 대문자 규칙을 적용한다.
  • Methods
    • 동사여야 한다.
    • 복합 단어의 경우 첫 단어는 소문자로 시작한다.
  • Constants
    • 클래스 상수로 선언된 변수들과 상수들의 이름은 모두 대문자로 쓰고 각 단어는 언더바 ("_")로 분리한다. -** Variables**
    • 변수 이름의 첫번째 문자는 소문자여야 한다.
    • 언더바 또는 달러 표시 문자로 시작하는 것이 허용 되기는 하지만, 사용하지 말자.
    • 짧지만 의미있게 짓는다.
    • 변수의 사용 의도를 알 수 있도록 의미적으로 짓는다.
    • 한문자로만 이루어진 변수는 암시적으로만 사용하고 버릴 변수를 제외하고는 피한다.
    • 임시 변수의 이름은 integer는 i,j,k,m,n 을 사용하고 character는 c,d,e를 사용한다.
  • ETC
    • DB 테이블: lower_snake_case
    • ENUM, 상수: Upper_snake_case
    • 컬렉션(Collection): 복수형을 사용하거나 컬렉션을 명시한다. (Ex. userList, users, userMap)
    • LocalDateTime: 접미사에 Date를 붙인다.

🗂️ Commit Convention

Ex) git commit -m "feat(#8) : 앱 설치 플로팅 배너 추가"

  • feat : 새로운 기능 추가
  • fix : 버그 수정
  • chore : 빌드 업무, 패키지 매니저, 라이브러리, dependencies 설정
  • docs : 문서 수정
  • design : CSS 등 사용자 UI 디자인 변경
  • style : 코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우
  • refactor : 코드 리팩토링
  • test : 테스트 코드, 리팩토링 테스트 코드 추가
  • rename : 파일 혹은 폴더명 변경
  • remove : 파일을 삭제하는 작업만 수행한 경우
  • comment : 필요한 주석 추가 및 변경
  • init : 프로젝트 생성 후 첫 커밋
  • !hotfix : 급하게 치명적인 버그를 고쳐야 하는 경우3. 제목 첫 글자는 대문자로, 끝에는 . 금지

🐬 Git Flow

main : 출시 가능한 프로덕션 코드의 브랜치

develop : 다음 버전을 개발하는 브랜치

feature : 기능을 개발하는 브랜치

hotfix : 출시 버전에서 발생한 버그를 수정하는 브랜치

브랜치 네이밍 : feat/#이슈번호

About

AI 기반 통합 알림장 소통 플랫폼 스쿨포인트

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages