얼마전 React 입문 과정으로 레트로 감성 Retro-Nwitter를 만들고 나서 또 다른 사이트 프로젝트 뭘 할 수 있을까 고민하다가, 예전에 유튜버 조코딩님의 유튜브 영상 중 구글 Teachable Machine을 사용해서 동물상 테스트를 만드는 것이 기억이 났다. 그래서 나도 Teachable Machine을 사용해서 "나는 어떤 개를 닮았을까?"가 갑자기 떠올라 견(犬)상 테스트를 만들어보기로 했다.
항상 취약했던 디자인은 어떻게 할까 고민을 하다가 Retro-Nwitter에서 썼던 동일한 글꼴, 둥근모꼴을 사용하는 것이 편하겠다는 생각이 들었고, 어차피 디자인을 이쁘게 못할꺼라면 최대한 심플하고 단순하게 해야겠다는 생각이 들어 그냥 흰 바탕에 글꼴을 강조하는 느낌으로 하기로 했다.
대표 이미지는 최근 도지코인으로 유명해졌던 시바견의 모습을 흑백으로 처리하고 눈 코 입만 나오게 하여 디자인해보았다.
아래는 견상테스트 메인페이지모습이다. 구성은 간단하다.
(구성: 이미지 + 제목 + 소제목 + 사진업로드 + 유의사항 + 공유하기 + 광고)
사진을 넣게 되면 견상 분석하기 버튼이 뜨게 되고
버튼을 누르면
React.js 가 익숙치는 않아서 최적화나 코드의 구조가 엉망이지만,
그래도 이러한 재밌는 컨텐츠를 빠르게 만들어 낼 수 있는 것이
웹개발의 묘미인거같다.
만들었던 견상테스트 사이트는 netlify를 이용해서 배포를 했다.
견상테스트 URL: https://dogfacetestbylefthanddeveloper.netlify.app/
'REACT' 카테고리의 다른 글
| react-router-dom에서 Switch를 import할 수 없다고 에러가 뜰때 (0) | 2021.11.13 |
|---|---|
| 오징어게임 얼굴 테스트 (0) | 2021.10.21 |
| Netlify로 Github Repository Web 배포하기 (0) | 2021.10.21 |
| React 입문 프로젝트, 레트로 감성 Retro Nwitter (0) | 2021.09.30 |