팀과제 그림제작 페이지

이번 팀과제에서는 NST를 사용해 만든 그림을 사이트에 올려서 다른 사람들과 공유할 수 있는 페이지를 만들어 보았습니다.

처음 Django ninja를 활용하여 REST API라는 것을 만들어 보았습니다. 사실 아직도 감이 잘 오지 않고 쓰는 방법을 잘 모르지만, 이 과제를 통해서 조금이나마 성장해 나가는 것에 만족감을 느꼈습니다. 

 

dajngo ninja는 ajax를 사용하여 api를 보내어 특정 동작을 수행하고 그 값의 결과에 따라서 메시지를 보여주거나, 화면을 이동시켜주는 역할로 사용하였습니다. 보통 프론트 라이브러리에서 api값에 따라 결과물을 보여준다고 하는데 django만으로 하려다보니 render가 되지 않는 문제가 있었고 어쩔 수 없이 화면을 이동시키는 방법을 사용하였습니다.

 

NST란? 🔍 

아래의 그림과 같이 콘텐츠 이미지(고양이)와 스타일 참조이미지(명화)를 이용하여, 콘텐츠 이미지의 콘텐츠는 유지하되 스타일 참조 이미지의 화풍으로 채색한 것 같은 새로운 이미지를 생성하는 최적화 기술입니다.

NST를 직접 구현하지 않고 텐서플로우 허브에 있는 모델을 가져와서 사용하였습니다.

비록 기능이 하나 밖에 없지만 NST작업을 해주는 서버도 따로 만들어서 총 2가지 서버를 만들어 사용하였습니다.

 

django-ninja를 사용하여 request, response 스키마를 설정하고 그에 맞는 값들을 받아와서 NST를 적용시킨 이미지를 S3에 담아서 그 S3의 url을 가져와서 보여주는 방식을 사용하였습니다.

 

 

 

index 🎈

처음 페이지에 들어오면 보이는 화면입니다. 로그인 기능과 회원가입 기능을 동시에 가지고 있습니다. 최대한 간단하게 만들기 위해서 이렇게 만들었습니다.

• 로그인할 때 django에서 제공이 되는 password valitor를 사용하여 단순한지, 숫자로만 되어있는지, 8자 이하인지 등을 판별해주는 기능도 사용해보았습니다.
• 만약 아이디가 존재한다면 비밀번호를 확인하는 validator를 만나고 문제가 없다면 비밀번호 일치하는지 확인 후 맞다면 로그인을 시켜주고 비밀번호가 다르다면 다르다고 표시해주는 기능입니다.
• 만약 아이디가 존재하지 않다면 비밀번호 validator를 통과하면 바로 회원가입과 로그인을 시켜주도록 만들었습니다.
• 뒤에 보이는 배경화면은 현재 좋아요가 가장 많이 눌린 그림이 반복적으로 표시되게끔 하였습니다.

/api/user/sign

home 🏠

home.html

홈화면에 들어오면 바로 게시물이 보입니다. 최신 순과 좋아요 순으로 정렬하도록 하였습니다. nav를 보시면 아래의 기능을 담당합니다.

• home으로 이동할 수 있는 Home,
• 페이지를 소개하는 About,  
• 게시글 작성하는 Generate
• 마이페이지로 이동하는 프로필 사진

게시글은 grid를 사용하여 원본이미지, 질감이미지, 합성이미지 이렇게 3개가 보여지도록 만들었습니다. 그 밑에는 사용자의 프로필사진, 그림의 제목, 작성 시각, 좋아요 갯수등을 표시하도록 하였습니다.

 

그리고 게시물은 한번에 불러와지는 것이 아니라 스크롤을 내릴때 마다 서버에서 값을 받아오는 infinite scroll을 사용하였습니다. pagenation을 2개로 설정하여 한번 스크롤 할 때 마다 2개의 게시물들이 보여지도록 하였습니다.

 

여기서 생긴 문제점 ❗

infinite scroll을 사용하다보니 처음 불러온 2개의 그림들을 제외하고 새로 불러온 그림들에는 script가 적용이 안되는 문제점이 생겼습니다. 그 이유를 곰곰히 생각해보니 이미 서버는 처음에 html과 script를 읽어왔고 그 이후에 추가될 때마다 load되는 것이 아니기 때문에 새로 DOM으로 추가되는 요소에는 eventlistener같은 것이 무용지물이 되었습니다.

 

이를 해결하기 위해 여러 방법을 시도하였고, 그 중 페이지가 불러올 때 마다 모든 이벤트를 삭제하고 다시 추가해주는 방법을 사용하여 해결했습니다.

 

 

 

mypage 🚗

마이페이지에 넘어오면 프로필 사진을 변경 기능을 모달로 만들었습니다. 

현재 제 게시물이 하나도 존재 하진 않아 비어있다라는 문구가 출력이 되었고 만약 첫 번째를 눌러 그림을 생성하고 오면 저 자리에 자신이 만든 그림이 home에서 봤던 방식으로 보여지도록 하였습니다.

 

generate 🚞

제목을 입력하고, 사진을 선택 후 아래에 원하는 질감을 선택 후 convert를 누르면 nst전환해주는 서버쪽으로 사진이 전송이 되고 nst전환 후 s3에 사진을 저장합니다. 그리고 s3의 url값을 반환해옵니다. 따라서 원본이미지, 질감이미지, 합성이미지 3개의 필드에 각각 url을 넣어두고 필요할 때 참조해오는 방식을 사용하였습니다.

 

여기에 사용된 전반적인 기능을 최대한 django-ninja를 활용하여 사용해보려고 노력했습니다. 처음 사용하는 것이기도 하고 google과 youtube를 통해 참고하였지만 한글로 된 문서는 거의 찾아볼 수 없어 아쉬운 부분이 많았습니다.

프론트와 백을 django로 사용하여 render가 원활히 되지 않아 모든 요청을 ajax로 보냈던 점도 아쉬웠습니다. 나중에 프론트 라이브러리도 같이 활용해보고 싶습니다.

 

처음에 djang-ninja를 접하고 굳이 이런걸 사용해야 하나 싶었지만, 사용해보니 시간은 조금 들지라도 한번 만들어 놓으면 훨씬 정교한 기능이 되는 것을 느꼈습니다. 자신이 정해놓은 입출력 값이 들어오지 않으면 아예 실행조차 시켜버리지 않는 점이 좋았습니다. 현업에서는 django-ninja를 사용한다고 하니 최대한 많이 활용해보려고 노력해야겠습니다.

 

감사합니다.