🧙🏻‍♂️녹턴앨리 지하 2층 불법입학센터

녹턴앨리 지하 2층 불법입학센터: 200ok

해리포터 머글인 사용자가 호그와트에 불법입학한다는 컨셉의 웹사이트
딥페이크와 스타일 트랜스퍼 이용해 사진을 해리포터의 초상화처럼 움직이게 만들어 학생증을 발급해주고, 간단한 테스트를 통해 나의 기숙사를 배정해주는 서비스를 제공한다.

프로젝트에 대한 나의 역할 → “보러가기👀”

🔗시연영상

주요 기능

• 이미지를 style transfer와 deepfake를 이용해서 움직이는 그림처럼 변형
• 시간이 오래 걸리는 작업을 멀티 프로세싱을 이용하여 처리
• 차트를 이용해서 데이터를 시각적으로 표현
• JWT를 이용한 로그인/사용자 인증
• 방명록 작성 및 삭제
• S3를 이용한 파일 처리
• 여러 css 애니메이션 효과

프로젝트 기록

🔗Github - backend
🔗Github - frontend
🔗Starting Assignment (tistory)

프로젝트 기간

2022-06-27 ~ 2022-07-04

팀 구성 및 역할

스킬 및 사용툴

Python, Django, DjangoRestFramwork, javascript

ERD

프로젝트에 대한 나의 역할 및 경험

나의 역할

백엔드

• 백엔드 배포
  • AWS(EC2, Cloud9) 을 이용하여 백엔드 배포
• 마이페이지 - 사용자 정보 표시

프론트엔드

• 페이지 제작
  • 기숙사 배정 결과 페이지
  • 마이페이지
  • 로그인 페이지
• sns공유 및 클립보드 링크 복사 기능

🧨TroubleShooting

1. 사용자가 배정받은 기숙사에 따라 CSS를 변경해야하는 문제

기숙사는 4개인데 만들어져있는 템플릿은 한개여서 사용자가 배정받은 기숙사에 따라 CSS를 변경해주어야 했다. 그래서 미리 각 기숙사에 맞는 알파벳을 붙여서 CSS class를 만들어 놓고 받아오는 기숙사정보에 따라서 적용하는 class의 이름이 바뀌도록 했다.

// get data - sorting dormitory
async function change_mydormitory() {

    const response = await fetch(`${backend_base_url}/dorm/sorting/`, {
        method: 'GET',
        headers : { Authorization : "Bearer " + localStorage.getItem("access")},
        withCredentials: true,
    })
    .then(response => response.json())
    .then(data => {      
        dormitory = ["gd", "hf", "sth", "rc"]
        let room_id = data.dormitory_id - 1
        
        // dorm element
        document.getElementById("mybg").classList.toggle(`${dormitory[room_id]}-bg`)
        document.getElementById("mydorm1").innerText = `${data.dormitory}`
		// .. 생략 ..

        // student id card
        admission = getYmd10(data.join_date)
        student_id = admission.slice(2, 4) + String(data.dormitory_id).padStart(2,'0') + String(data.id).padStart(4,'0')

		//.. 생략 ..
        document.getElementById("admission").innerText= `${admission}`
        // document.querySelector(".portrait").attr('style', 'background-image: url("' + image_url +'")')
    })
}

아래와 같이 배정된 기숙사에 따라 다른 CSS가 적용되게 되었다.

회고

프로젝트 기간에 비해서 볼륨이 좀 컸던 것 같다.
그래서 서로 프로젝트에 집중하느라 팀 내 소통이 조금 부족했었다.
가장 큰 문제는 배포를 성공하지 못한 것이었는데, 마감 3일전부터 시작하면 충분히 할 수 있을 거라 생각했는데 배포가 생각보다 오래걸리고 고려해야될 변수가 많았다. 그래서 다음 프로젝트에서는 배포를 미리부터 준비하자는 의견이 나왔다.

그래도 그동안 다른 프로젝트에서는 해보지 못했던 EC2, S3 사용 같은 것도 해볼 수 있어서 좋았고, 멀티프로세싱이라는 새로운 기술도 접할 수 있어서 만족스러웠다. 이번에도 제작한 목업과 기획대로 잘 완성이 되었는데, 특히 프론트쪽은 목업보다 더 잘나와서 뿌듯했다.