2023. 3. 5. 21:25ㆍ프로젝트
ANICON PICKER => ANI SCHOOL
기존 프로젝트 이름이였던 ANICON PICKER를 ANI SCHOOL로 변경되었다.
물론 이름만 바꾼건 아니고, 프로젝트의 컨셉과 구조를 조금 변경하였다.
배포하기전에 좀 더 확실한 컨셉을 잡아놓고 싶었기에 배포예정일이 얼마 남지 않았지만 급히 수정했다.
기존에는 아래와 같이 별다른 컨셉이 없었다.
컨셉을 출석부로 잡고 동물 학교의 학생들을 직접 커스터마이징 하여 생성하는 컨셉으로 잡았다.
컨셉이 바뀌면서 구조변경과 그에따른 코드 리팩토링이 이루어졌다.
리팩토링이 끝난 모습은 아래와 같다.
배포 전 컴포넌트 구조변화 및 기능추가
컨셉이 출석부로 바뀌게 되면서 컴포넌트를 하나 더 만들어야 했다.
기존에 SelectButton컴포넌트가 App컴포넌의 자식요소로 있었다면, 이번엔 Profile이라는 새로운 컴포넌트를 만들어서 App컴포넌트와 분리해주고 Profile 컴포넌트의 자식컴포넌트로 SelectButton컴포넌트를 넣어주었다.
그 과정에서 App컴포넌트에서 SelectButton로 바로 props를 내리던 걸 Profile 컴포넌트를 한번 더 거치게 되어 코드가 좀 더 어지러워졌다. Redux에 대한 학습이 어느정도 진행되면 Redux를 사용하는 방향으로 리팩토링을 진행해봐야겠다.
프로필 생성 기능
귀여운 동물 프로필을 생성해주는것이 프로젝트의 목적인데,가장 중요한 프로필사진을 PNG로 뽑아주는 기능이 구현을 못했었다. 그도 그럴것이 현재 진행중인 프론트엔드 코스에는 그러한것을 알려주지 않았기 때문이다.
그렇다고 안배웠으니 구현안하겠다? 말도안된다. 팀원분과 프로필 캐릭터를 생성해주는 사이트들을 모두 뒤지며 비슷한 기능을 구현해낸 사이트들을 찾았고, 그에대해 구글링 한 결과는Html2Canvas 와 dom-to-image 이 두가지 라이브러리를 사용한다는 걸 알게되었다.
둘 중에 좀 더 쓰기 편리해보이는 dom-to-image라이브러리와 캡처한 파일을 저장해주는 file-saver라는 라이브러리를 설치했다. 공식 깃허브에 접속하여 상세한 이용방법을 익혔고 프로젝트 코드에 적용했다.
프로필 생성의 간단한 동작방식은, 쿼리셀렉터를 통해 캡처 할 섹션을 지정해주고, 캡처된 데이터를 .then으로 가져온다.
그 후 file-saver 의 메서드인 saveAs를 통해 해당 데이터를 저장하고 파일명은 사용자가 직접 정할 수 있도록 인풋창을 만들었고, 입력된 값인 e.target.value를 pngname이라는 state로 할당해줬다.
프로필 생성 기능이 구현됐다고 생각했지만 다운받은 PNG파일의 하단이 잘려서 출력되는것을 확인했다.
공식 깃허브를 찾아보니, 이미지의 마진값에 영향을 받는다고 나와있었다.
아래의 애니스쿨 타이틀과 간격을 주려고 이미지 섹션에 margin-bottom : 20px; 를 줬었는데, 이 때문이라고 판단하여 마진값을 빼주고 타이틀에 margin-top : 20px;를 주어 해결했다.
그 결과 위와같은 정상적인 PNG사이즈가 출력되었다.
배포 후 반응
반응은 생각보다 긍정적이였다. 아무도 이용해주지 않으면 어쩌지? 라고생각했던 나의 우려와는 다르게 감사하게도 정말 많은 사람들이 이용해주고, 또 프로필사진으로 게시해주었다.
반응은 긍정적이였고, 그만큼 피드백도 많이 나왔다. 구글폼을 통해서 사용자의 사용경험을 수집하고 싶었는데 다들 귀찮더라도 너무 정성스레 작성해줘서 이 후 디벨롭방식에 대한 방향성이 잡혔다.
배포 후 피드백 및 핫픽스
3/1일날 배포하기로 말해놨기 때문에 피드백도 받을 겸 프로필생성만 추가 구현하고 냅다 배포해버렸다.
배포는 현재 상황에서 서버나 DB가 필요하지 않기때문에 깃허브페이지를 이용했다.
사실 둘이 보기에는 토이프로젝트의 완성도가 나쁘지 않았다고 판단했기에 꽤나 의기양양 배포를 진행했다.
그 결과.. 반응은 긍정적이였지만, 누락된 이미지가 있다거나, 명시 된 컬러와 출력되는 컬러가 다르다거나 그 외에도 둘이서는 볼 수 없었던 다채로운 오류가 발생했다.
못 찾은 문제가 있을거라고 예상했지만 이렇게 와르르 터져나올 줄 몰랐다....
하지만 우리손으로 만든 토이프로젝트니까 끝까지 책임지고 최대한 사용자들의 니즈는 채워주고, 불편함은 해소해줘야겠다는 뭔지모를 책임감이 솟아났고 주말을 헌납하며 핫픽스를 시작했다.
우선 피드백 자료들을 메모장에 적어가며 나열해보기 시작했다.
우선순위는 당장 서비스를 이용하면서 직접적으로 불편함을 느낄 수 있는 사항들을 최우선순위로 두고 거의 1시간내로 픽스하고 곧바로 빌드 후 재배포 했다.
커밋로그에 남겠지만, 내가 언제 코드를 수정했고, 새 기능을 추가했는지 명시적으로 보고싶어서 패치노트라는 메모장에 적어놓고 기록하고 있다.
배포, 그리고 유지보수 후 느낀 점.
둘이서 시작한 프로젝트라서 완성도 면에서는 많이 부족하다고 생각한다.
"우리가 이렇게 굉장한걸 만들었어!"라며 자랑하고 싶은 게 아니라, 우리가 미처 발견 못 한 취약점이나 에러에 대한 피드백을 받고 좀 더 나은 경험을 주는 서비스를 만들어보고 싶었기에 배포를 결심했다.
정말 많은 피드백과 응원, 그리고 무엇보다 잘 사용하겠다는 그 한마디가 잃어버린 내 주말을 모조리 보상해줬다.
3/4에는 피드백을 남겨줬던 사용자들이 자신들의 피드백이 적극 반영되고 있음을 보여주고 싶어서 패치노트 팝업창을 만들었다.
아직 사용자가 많지않기에 가능하겠지만, 힘 닿는 한 사용자들이 함께 만들어가는 서비스라는 걸 보여주고 싶다.
이러한 경험이 현업에서 도움 될 지는 미지수지만 적어도 내가 프론트엔드 개발자라는 꿈을가지고, 공부하고있는 이 시점에서 나에게 굉장히 큰 원동력이 되는 경험이다.
만들었으니, 구현했으니 끝이다. 이게 아닌 앞으로 꾸준히 팀원분과 유지보수 해가면서 새로배우는 기술들을 접목시켜보고싶다.
피드백 후 수정 및 기능추가 완료된 서비스.
https://parksubeom.github.io/Project_RetroAnimal_Generator/
[애니스쿨] 나만의 작은 동물 친구들
나만의 귀여운 프로필아이콘을 만들어 보세요.
parksubeom.github.io
'프로젝트' 카테고리의 다른 글
| 스택오버플로우(stackoverflow) 클론코딩[1주차] (1) | 2023.04.17 |
|---|---|
| 스택오버플로우(stackoverflow) 클론코딩[0주차] (0) | 2023.04.17 |
| 첫 토이프로젝트[ANICON PICKER] (1) | 2023.02.27 |