• 스타트업을 열심히 하시는 어떤 분이 진행하고 있는 아이디어

자신의 경력, 소개문구, 자기를 대표하는 사진, 경험담, 가치관 등을 하나의 페이지에 예쁘게 담아 스스로를 효과적으로 표현할 수 있는 자기소개 프로필 툴을 만드는 것.

write review to all the others' idea (mandatory)
add details to your own idea (optional)

1. 자신만의 관심사 혹은 정보, 취향 등을 기재
2. 친구들끼리 서로 이미 알고 있는 관심사를 넣어달라고 요청 혹은 추천
3. 자신도 관심있는 상대의 관심사를 클릭해서 메세지를 주고받을 수 있음.
4. 원하지 않는 요청이나 추천은 거절 가능
5. 따로 게시물을 올리는 기능은 없음
6. 서로의 관심사, 취향을 알아가면서 실제 인간관계에 적용하는 것이 목적 (생일 날짜 확인부터 선물 고르기, 같이 할 게임 구매 등등)

포인트 : 한눈에 서로의 관심사를 확인해 서로를 알아가며 친목 형성. 길게 게시글을 쓸 필요 없이 태그들과 프로필만으로 소통하는 것이 목표. (즉 매우 가볍게 사용 가능해야 함) 오랜 시간동안 이용하는 SNS가 아닌, 잠깐 잠깐 필요할 때에 들어가서 서로의 취향, 정보 등을 확인하고 서로 배려, 소통, 공감하는 용도 (음식 정하기, 놀거리 정하기, 기념일 선물 등등등 / 얘 생일이 언제였지? 우리 만난지 며칠이나 됐지? 등등)

부제에 대한 아이디어를 달아주세요.

일단 기획 완성과 구현이 어렵고 소개원실 플젝 취지에도 맞는지 잘 모르겠다는 걸 말해두겠음. 근데 multi-player game도 가능하다고 조교님들이 올려둔 문서에 있길래 일단 참고라도 될까 해서 정리해둠.

• 일반 커뮤니티처럼 여러 내용을 담은 글을 자유롭게 올리고 댓글도 달고 할 수 있고, 사이트 관리자가 되어서 특정 유저를 밴하거나 글을 지울 수도 있다. 이런 요소들 자체가 게임 플레이 방식이 된다. '관리자' 측과 '비밀단체' 측의 두 편으로 나뉘어서 어떤 유저가 관리자 편이고 어떤 유저가 비밀단체 편인지 모르는 상태에서 다양한 미션을 해내고 상대 편을 물색해서 배제하거나 속여서 낚아내기도 하고 같은 팀과 접촉하는 등을 하는 게임이다.

• 스토리가 플레이어마다 독립적으로 진행되지만 그 스토리를 진행시키기 위해 실시간으로 글을 올리거나 비밀단체 소속 유저를 잡아내서 밴을 시켜야 하거나 커뮤니티적인 요소를 다루게 된다.

• 스토리 중간에서 핵심적으로 다뤄질 미션 한 가지를 제시하자면 다음과 같다. 관리자는 저항 세력을 찾아내서 밴 하는 것이 목표고 (같은 관리자를 밴하게 되면 밴한 사람과 밴 당한 사람 모두 페널티를 받는다.) 저항 세력은 암호와 비밀 지시를 가진 저항 세력에 컨택 (쪽지 / 메일) 하여 그것을 받아서 임무를 수행하면서 암호와 비밀 지시를 더 퍼뜨리는 것이 목표다. 관리자에게 잘못 컨택하게 되면 정보를 들키게 된다. 그렇게 해서 각각의 플레이어가 자기 엔딩으로 나아가면서도 같은 팀에게 기여하는 방식이 된다.

• 누가 더 우세한지를 실시간으로 표시해주면 재미있을 것 같고 일종의 사회실험 데이터로 활용할 수 있도록 추이를 기록해놓아도 좋을 것 같다.

• 제대로 만든다면 많은 플레이어가 유입되고 광고도 붙여서 돈 벌 수 있지 않을까

project proposal 9/24 (Fri) 6pm
Write a 2-page project proposal on a web service software system.

• the proposer names (team information)
• a title (it can be changed later)
• target customers
• what feature the system would add or what problem the system would solve and why the system is important and exciting
• what the system would do
• how we will test and demo the system
• finish and hand in the proposal document
• close this project board!!

자신의 위시리스트를 관리하고, 친구와 공유할 수 있도록 하는 앱

• 참고 : https://giftwhale.com/
• 쇼핑몰 홈페이지에서 스크랩해서 등록 가능
• 홈페이지의 html에서 제품 이미지, 제품명, 가격 정보 등을 fetch (틀리게 fetch됐을 경우 유저가 직접 수정 가능)
• 체크리스트 형태로, 구매 완료한 물건은 바로바로 체크 가능하게 만들기
• 아이템별 중요도 설정 가능 (필요함, 매우 갖고 싶음, 갖고 싶음, 그냥 스크랩)
• 공개 / 친구 공개 / 비공개 설정 가능
• 가격 변동 트래킹 기능 : 항목당 '가격 변동 트래킹' 기능 사용여부 설정 가능 -> 이 항목들은 주기적으로 가격을 fetch하여 기록. 다나와처럼 그래프로 가격변동 보여주기. 설정한 주기마다 이메일로 가격변동 알림 받을수 있음
• 최저가 표시 기능 : 얘도 항목별로 설정 가능. 네이버쇼핑/다나와 최저가검색 이용하여 해당 제품의 최저가/구매처도 같이 표시 (제품명을 네이버쇼핑/다나와에 입력해서 검색결과를 fetch해와서 유저에게 보여주는 방식)
• 항목 카테고리별, 쇼핑몰별, 중요도순으로 정렬 가능
• 리스트를 다른 사람에게 공유 가능 (선물할 때 참고). 대놓고 공유하긴 부담스러울 수도 있으니, 친구 추가 기능을 만들어서, 친구들끼리 서로의 리스트를 볼 수 있게.
• 장바구니 기능 : 구매할 예정인 아이템들을 장바구니에 넣어둘 수 있음. 내 위시리스트에 있는 아이템 / 친구의 위시리스트에 있는 아이템. 구매 완료 버튼을 누르면 항목이 구매 기록으로 이동됨

Comment freely about this matter.

ReJourn_components_1.pdf

• Interactive View
• PDF

PDF로는 개별 페이지는 볼 수 있는데 페이지 간의 관계를 볼 수 없어서... 직접 클릭해가면서 화면 바뀌는거 보려면 Interactive View로 보기!
(피드백할 거 있으면 Interactive View나 PDF 들어가서 원하는 지점 찍어서 코멘트 달아줘도 됨)

https://docs.google.com/spreadsheets/d/1c_-Yhgztl67zCzPPoLYfwwwSOLCNki9QhyVgl6wf-js/edit#gid=0

좋아요 에서 한발 뒤로 돌아가서 생각해보기.
폭발적으로 끌어당길만한 무언가

https://www.figma.com/file/5EBWWrr5LM819ELH3ZAcMm/ReJourN
(9/22 오후 3시 링크 수정됨)

여기서 디자인 조금씩 짜둘 예정이니까 틈틈이 들어와서 구경하고 아무때나 피드백 해줘!
+) 더 자세히 보고 싶은 사람들은 저기 Figma 사이트 가입하고 가입한 이메일 나한테 알려주면 내가 팀 멤버로 초대해줄게!

10:00 am ~ 11:30 am 동안 진행

• proposal 제출 완료
• ReJourN 메인 컬러 정함
• 서비스의 부 제목에 대한 아이디어가 필요함
• 좋아요와 같이 사람들이 지속적으로 서비스를 이용할 만한 요소에 대한 고민이 필요함
• 첫 번째 sprint가 시작되는 10/5 전까지 그 이후의 기획 문서 작성을 위한 사전 작업을 각자 역할 나누어 맡기로 함

Suggest our project name at comment!

여행 공유 서비스

여행로그에 특화된 sns
여행 다녀온 후 개인 여행브이로그 올리는 사람들이 매우 많으므로, 브이로그화하기 적합한 보관 구조 제공 (사진별 플레이리스트 등록, 폰트 선택 기능 제공 등)
여행지마다 앨범을 만들어 사진 보관 및 간단 설명
label 제공하여 새로운 여행 계획 수립시 라벨로 간편검색, 참고 가능
여행 멤버 그룹 초대

• 10/5까지 기획 / 아이디어 문서화하기
  각 문서의 책임자를 한 명씩 배정하고, 서로 자유롭게 공유하고 피드백하는 방식으로 작성하겠습니다.
  어느 정도 진행한 후에 피드백을 받고 싶을 때는 꼭 깃허브의 project 탭에 들어가 자신의 card를 In Progress에서 Waiting for Feedback으로 옮겨주세요. 원한다면, comment를 남길 수 있게 issue를 올려주세요. 종종 project 탭에 들어가서 누가 피드백을 원하고 있는 지 확인하도록 합시다.

• Database Diagram (도현)

• Schedule to Implement Functions (진영)

• Service Flowchart (유나)

• Design Outline (수빈)

9/12 11 am at 설입

메인 화면에 그라데이션 노을사진(핑크노을과 주황노을 중간 어딘가) 하나 잘 정해서, 색 포인트 3-5개 정도로 뽑아내기.
메인 색(#f69d72) 기준으로 쓰고 2-3개 베이스 컬러로 비슷한 계열 쓰기.
나머지 조금 다른 2개 정도는 좋아요 하트 색 등 포인트 요소로 쓰기.

머신러닝이 아닌 클라우드소싱 방식으로 음악 추천 데이터를 모아 제공하는 서비스

• https://alternativeto.net 랑 비슷한 추천방식

• 스포티파이 api(https://developer.spotify.com/documentation/web-api/) 이용해서 곡 리스트 fetch.

• 스포티파이 api 이용해서 자기가 좋아한 플레이리스트 업로드 -> 프로필에 설정됨 (스포티파이 이용자가 아닌경우 직접 곡을 검색하여 좋아요 표시가능)

• 사람들은 익명으로 어떤 곡을 검색한 뒤(리스트 업로드 했으면 거기서도 선택가능), 비슷한곡(또는 취향 맞는 추천곡)을 각 곡당 추천할 수 있음. 각 추천 항목에는 투표를 할 수 있음.

• 추천곡들은 추천수 많은 순으로 정렬 (스마트 추천 - 같은 아티스트의 곡은 제외하고 표시. 팬심에 의해 그냥 같은 아티스트의 곡을 추천할 수 있으므로)

• 곡 자체에 대한 평가는 배제, 철저히 '추천'에만 집중. 투표는 '추천 항목의 적절성'에 대해서만 가능

• '비슷한 곡'을 떠올리기가 어려울 수 있으므로 장르/아티스트/플레이리스트 필터링 기능으로 선택범위를 좁힐수 있게 하기

system architecture를 표현하는 데에 UML을 활용하면 좋음

UML 작성 툴 사이트
https://moqups.com/ko/uml-diagram-tool/

Suggest our team name at the comment!

https://swagger.io/tools/swaggerhub/

예시) https://app.swaggerhub.com/apis/MumenRiders/MedCanAPI/1.0.0#/Data/createData

team 7
vidol
아이돌 팬덤 시장의 상승
특정 아이돌에 대한 비디오만 모아서 보고자 하는 수요
feature1: collect process data about idols
v앱/인스타/유튜브/페이스북에서 데이터를 가져와서 한꺼번에 볼 수 있도록 한다
feature2: scan videos and provide timelines marking where users' favorit appears
아이돌 얼굴을 인식해서 타임라인 마킹을 해준다

• demo design
  search { } (검색창)
  ranking (아이돌 인기 랭킹)
  naver / instagram / youtube video ( 각 플랫폼에 맞는 디자인으로 보여주기 )

team 9
bandcruit
밴드를 즐기는 사람들이 쉽게 협업/제작/업로드 할 수 있는 서비스
search for a song / create song page with youtube link
사람들의 커버를 자유롭게 합치고, 거기에 자신의 커버를 더할 수 있음.

team 10
connectoon
여러 웹툰 사이트의 리뷰를 모아서 볼 수 있고 웹툰의 장르를 세부적으로 살펴볼 수 있는 서비스

참고할 만한 개선점
-> 팀 이름 영어 이름으로도 준비해놓기
-> 시장 조사를 통한 실제 수요 관련 수치 준비
-> 비주얼적으로 서비스를 와닿을 수 있는 자료 준비
-> 기존의 서비스와 차별화할 수 있는 지점을 확실히 하기

가능하면 .gitignore을 본인 ide에 맞게 수정해주시기 바랍니다. 기본적으로 python 관련 무시해야할 파일은 다 설정되어 있으니 js, ts랑 ide 관련 파일만 자기 개발환경에 맞게 지정해주세요.

Comment freely about this matter.

#f69d72

^ ㅇㅅㅇ ^

9/10 10 am ~ 1pm

Comment freely about this matter.

• IT 창업 개론 들을 당시에 텀 프로젝트로 구상했던 비즈니스 플랜
  고객의 취향을 분석해서 취미 상품을 추천해주고 체험해볼 수 있도록 하는 서비스

1. 취급 품목은 다양한 보드게임, 파티용품(젠가/거짓말 탐지기/다트/노래방 마이크), 취미용품(컬러링 북, 뜨개질 용품, 십자수)로, 일정 이상의 비싼 품목은 대여해주고 일정 이하의 싼 품목은 판매.
2. 구독 서비스를 통해 구독비를 지불하면 한 달 간 대여 서비스를 무제한 이용할 수 있도록 한다. 또 취향을 분석해서 한 달에 한 번씩 고객의 취향에 맞을 만한 상품들을 묶어 배달 대여 해줌으로서 자신도 몰랐던 취향을 알 수 있도록 함. 이 큐레이팅 서비스에 대한 평가를 받음으로써 고객의 취향 정보를 수정해 나간다.
3. 더 나아가 근처에 같은 취향을 가진 사람이 있다는 것을 알림 받고 함께 놀 수 있도록 커뮤니티를 형성한다.

전제조건 : 서울대학교 개설교과목 DB 및 수강 기록 DB의 ML을 이용한 과목 세부 카테고리화

1. 관심사 기반으로 인기 있는 교양 과목 추천.
2. 이전에 들었던 전공 과목을 기반으로 연계되는 과목 추천.
3. 부전공/복수전공 진입 시, 혹은 진입을 위한 기초 과목 혹은 맛보기 과목 추천.
4. 듣고 싶은 과목을 제시하면 선이수 등을 고려하여 학기 별 배분.
5. (선택) 로드맵을 만들어 공유
6. (선택) 특정 과목 학기 별 개설 여부 예측 (가능...?)

1. Typescript 사용 여부

2. React-hook 사용 여부

저는.. 개인적으로.. 둘다... 동의...

database diagram으로조차 그리지 못했지만, 여유가 별로 없는 와중에 틀이라도 잡아놓고 싶어서 각 table에 뭐가 들어가는 지만 간단하게 그려봤어. 보고 추가로 데이터베이스에 더 있어야 할 것 같은 데이터나 정보 표현 구조에 대해 피드백 부탁해.
사진 파일이나 비디오 파일 같은 건 어떤 방식으로 저장되는지는 모르겠어서 일단 파일이 저장된 path로 표현될 거라고 가정하고 적어놨어.

• account

1. user_name (문자열): 사용자 이름. 계정을 구분하는 primary key
2. email (문자열): 정해진 형식의 이메일 주소
3. password (문자열): 정해진 제한조건을 만족하는 비밀번호

• repository

1. repo_id (정수): 저장소 id. 저장소를 구분하는 primary key
2. repo_name (문자열): 저장소 이름.
3. group_id (정수): 그룹 id. 저장소에 참여하는 유저들을 담아놓은 그룹.
4. route_id (정수): 루트 id. 저장소 메인에 보이는 루트.

• profile

1. user_name (문자열): 프로필 사용자 이름. 프로필을 구분하는 primary key
2. image_file_path (문자열): 프로필 이미지 파일이 저장되어 있는 주소.
3. description (문자열): 프로필 사용자의 소개 문구.

• group

1. group_id (정수): 그룹 id
2. user_name (문자열): 사용자 이름
   -> 사용자와 그룹 사이의 다 대 다 연결 관계.

• friend

1. user_A (문자열): 사용자 이름.
2. user_B (문자열): 사용자 이름.
   -> 두 사용자 사이의 다 대 다 연결 관계.
   -> user_A < user_B (사전적 순서) 로 저장해서 중복 record 없애기

• userSetting

1. user_name (문자열): 사용자 이름. setting을 구분하는 primary key.
   ...
   -> 설정한 정보를 간결하게 담는 attribute들

• repositorySetting

1. repo_id (정수): 저장소 id. setting을 구분하는 primary key.
   ...
   -> 설정한 정보를 간결하게 담는 attribute들

• discussion

1. discuss_id (정수): 논의 글 id. 글을 구분하는 primary key.
2. title (문자열): 글의 제목
3. text (문자열): 글의 내용

• post

1. post_id (정수): 게시물 id. 글을 구분하는 primary key.
2. repo_id (정수): 게시물이 속한 저장소의 id.
3. title (문자열): 게시물의 제목
4. text (문자열): 게시물의 내용
5. class (char): 게시물의 종류. diary, vlog 등을 구분한다.
6. time (시간): 작성 시간
   -> diary, vlog 등 하위 테이블을 만들어서 각 종류의 글에 특화되어 포함되어야 하는 정보들을 저장한다.

• comment

1. comment_id (정수): 댓글 id. 댓글을 구분하는 primary key.
2. user_name (문자열): 댓글을 작성한 사용자의 이름.
3. text (문자열): 댓글 내용.
4. class (char): 댓글이 달린 글의 종류. post / discussion /..
5. parent_id (정수): 댓글이 달린 글의 id. post_id 또는 discuss_id 등
6. time (시간): 작성 시간

• photoInPost

1. post_id (정수): 게시물의 id
2. photo_id (정수): 사진의 id
3. order (정수): 게시물 안에 사진이 담긴 순서
   -> 게시물과 사진의 다 대 다 연결 관계.

• route

1. route_id (정수): 경로의 id. 경로를 구분하는 primary key.
   ...
   -> 경로에 들어가야 할 정보. 아직 모르겠음.
   -> 지도에 여행 경로를 나타낼 때 쓰임.

• placeInRoute

1. route_id (정수): 경로의 id
2. place_id (정수): 장소의 id
3. photo_id (정수): 사진의 id. 없을 수도 있음. 여행 경로 상의 각 장소별로 대표 사진 배정하는 것.
4. order (정수): 경로 상의 순서
5. plan_or_not (불리언): 계획 상의 경로인지 실제 여행 경로인지를 나타내는 것
   -> route와 place의 다 대 다 연결 관계

• photo

1. photo_id (정수): 사진의 id. 사진을 구분하는 primary key
2. repo_id (정수): 사진이 속한 저장소의 id.
3. file_path (문자열): 사진 파일이 저장된 주소의 경로
4. uploader (문자열): 사진을 올린 사용자의 user_name
5. privacy (char): 사진이 올린 본인에게만 보여야 하는 지(private), 저장소를 공유하는 그룹에게만 보여야 하는 지(only group), 모두에게 다 보이도록 할 것인 지(public) 설정을 저장
6. place_id (정수): 사진에 달린 장소 태그의 장소 id.
7. tag_id (정수): 사진에 달린 태그의 태그 id.

• video
  photo와 같은 구성.

• tag

1. tag_id (정수): 태그의 id. 태그를 구분하는 primary key.
2. tag_name (문자열): 태그의 이름.
3. predefined (불리언): 사용자가 정의한 태그인지, 이미 정의되어 있는 기본 태그인지.
   -> 미리 정의된 tag들이 저장되어 있을 수도 있고 사용자가 새롭게 정의한 태그가 추가될 수도 있음.

• place

1. place_id (정수): 장소의 id. 장소를 구분하는 primary key.
2. place_name (문자열): 장소의 이름.
   ...
   -> 장소의 실제 지도 상 위치를 표현하는 attribute가 있어야 함.

• 여름방학 동안 진행했었던, 잠시 보류된 프로젝트

독자가 상호작용할 수 있는 소설 형식의 컨텐츠를 쉽게 만들 수 있는 툴을 제공하고, 이 툴을 통해 제작한 컨텐츠를 업로드하여 함께 즐길 수 있는 커뮤니티. 이 툴을 통해 인터랙티브 노블, 심리테스트, 미궁게임, 설문조사 등 다양한 장르/용도의 컨텐츠를 제작할 수 있고 특정 종류의 컨텐츠 제작을 위한 템플릿을 작성해서 공유할 수 도 있다.

1. 로그인 관련

Front-End

• 계정 생성 페이지 rejourn/login/signup -> 성공 시 rejourn/로 리다이렉트
• 로그인 페이지 rejourn/ = rejourn/login -> 성공 시 rejourn/[:user_name]/feed로 리다이렉트

Back-End

• Account API

2. 계정 관련

Front-End

• 피드 rejourn/[:user_name]/feed -> 클릭 시 rejourn/[:another_user_name]/[:post_id]/overview로 리다이렉트 / 코멘트를 바로 달 수 있는 칸과 반응(좋아요같은)할 수 있는 버튼 필요 (오직 계정 주인만 피드에 접근 가능)
• 계정 주인이 참여한 게시물 모음, 친구(혹은 팔로워) 수 표시 rejourn/[:user_name]/mypage -> 새 게시물 작성 버튼 필요 및 클릭 시 rejourn/[:user_name]/create로 리다이렉트 / 만약 다른 사람의 계정일 경우 친구추가(혹은 팔로우) 버튼 생성 / 친구 수 클릭 시 rejourn/[:the_user_name]/mypage/friends로 리다이렉트 없이 이동
• 계정 주인의 친구 목록 rejourn/[:user_name]/mypage/friends
• 계정 정보 변경 rejourn/[:user_name]/account -> 성공시 리프레시
• 각 feed/mypage/account는 탭을 눌러서 리다이렉트 없이 이동 가능

Back-End

• Account API & Post API

3. 게시물 작성 관련

Front-End

• 게시물 생성 rejourn/[:user_name]/create -> 생성 완료 시 rejourn/[:user_name]/[:post_id]/overview로 리다이렉트
• 게시물 제목, 썸네일, 여행 기간, 참여자 목록 등의 수정 관련 rejourn/[:user_name]/[:post_id] -> 피드로 돌아가는 버튼 필요 / droplist로 구현된 참여자 목록 클릭 시 참여자는 다른 참여자 초대 가능 / 참여자 목록의 프로필사진 클릭 시 rejourn/[:the_user_name]/mypage으로 리다이렉트
• 경로, 업로드된 사진, 분류된 앨범, 달려진 코멘트 등의 표시 rejourn/[:user_name]/[:post_id]/overview -> 사진 업로드/경로 fork/tag 추가/경로 수정 및 추가 버튼 필요 (경로 관련 버튼은 예정 경로와 실제 경로 구분 - 예정 경로는 기간 이후에는 흐릿해짐)
• 장소 별 사진 앨범 rejourn/[:user_name]/[:post_id]/overview/[:path_id] ->
• 태그 별 사진 앨범 rejourn/[:user_name]/[:post_id]/overview/[:tag_id] -> 모든 사진은 언제든지 코멘트 달 수 있도록 칸이 마련됨
• 업로드 된 사진 모음 rejourn/[:user_name]/[:post_id]/overview/photos ->
• 토의 모음 rejourn/[:user_name]/[:post_id]/discussion -> 토의 게시물 작성 버튼 필요 및 클릭 시 rejourn/[:user_name]/[:post_id]/discussion/create로 리다이렉트
• 각각의 토의 게시물 rejourn/[:user_name]/[:post_id]/discussion/[:discussion_id]
• 토의 게시물 작성 rejourn/[:user_name]/[:post_id]/discussion/create
• 환경설정(공개 범위 변경, 게시물 삭제 등) rejourn/[:user_name]/[:post_id]/config
• 각 overview, discussion, config는 탭을 눌러 리다이렉트 없이 이동
• rejourn/[:user_name]/[:post_id]는 상단 바 형식으로 항상 존재함 (이동 탭도 여기에 포함) (따라서 정확히 rejourn/[:user_name]/[:post_id]라는 링크에 머무를 수는 없겠죠?)

Back-End

• Post-API

4. 페이지 공통

Front-End

• 자연스러운 뒤로가기 버튼 구현 (<< 이건 선택사항인듯. github만 봐도 따로 ui 없이 브라우저 기본 뒤로가기 버튼 쓰도록 되어있으니까)

대략적으로 정리가 되어야 문서든 뭐든 작성할 수 있을 것 같아서 정리해놓음.
유나는 시각화 + 구체적으로 Back-End(&DB)가 어디서 어떤 방식으로 개입하는지, 또 각 Front-End의 페이지에는 어떤 컴포넌트들이 들어갈지 상세하게 만들어주면 될듯
내 개인적인 시각으로 구조를 짠거니 버튼이 다른 페이지에 있으면 좋겠다, 이건 아예 다른 페이지로 나누자, 이것들은 한 페이지 안에 집어넣자 같은 것들 아무나 코멘트 달아주면 될듯. (+뭔가 이상한 점이나 이해 안되는 점도 코멘드 달아줘)