[딤] 초보 웹 개발자의 우당탕탕탕탕탕탕 첫 사이드 프로젝트 도전기 (with. 우당탕탕 친구들) #2. 니꿈을 펼쳐…★

#2. 니꿈을 펼쳐…★ 

 

 

<지난이야기>

트리브 웹 개발의 첫 임무로 추천여행지 웹을 만들게 된 서희, 그러나 난생 처음 보는 에러들을 만나게 되고… 역시 실전의 길은 험난하구나…

 

이번에도 몬몬언니와 가르디언니가 피그마에서 랜딩페이지 디자인을 기깔나게 만들어주었다.

그러나.. 도장깨기 하듯이 추천여행지 하나 깨고 나니까 다음 시련이 사대천왕처럼 나를 기다리고 있었다

 

패러디

 

그것은 바로 랜딩페이지의 애니메이션 요소

디자인이 너무 귀여워서 넋놓고 감상하다가 퍼뜩 정신이 들었다.

 

이거 진짜 내가 만들어..?

내가..?

 

그래서 내가 만들었다.

 

 

팀원이 한 명이라 좋은 점은 모든 것을 내 마음대로 할 수 있다는 것이다. 반대로, 안 좋은 점도 모든 것을 내 마음대로 알아서 해야 한다는 것이다.

 

css 트랜지션이라는 것을 알게 되고 구글링을 해 보면서 처음 보는 신기한 기능이 많아서 이것저것 해 보며 재밌게 작업할 수 있었다. 이때의 경험도 지금 생각해보면 나에게 참 도움이 많이 되었던 것 같다. 나를 강하게 키우는 트리브

또 스크롤 위치에 따라 화면이 잠깐 멈추는 효과도 넣었는데 이건 ScrollTrigger라는 라이브러리를 사용해서 구현했다. 이때도 수치 계산하고 설정하느라 꽤 애를 먹었던 기억이 난다.

 

그래도 이 과정에서 이것저것 많이 시도해보고 배워가면서 또 얼레벌레 완성하긴 했다. 이쯤 되면 얼레벌레가 내 트리브 활동 테마인듯ㅜㅜ

 

 

 

: TRIV 랜딩페이지 보러 가기 http://triv.kr/

 

 

그렇게 완성된 결과물을 보니 너무 마음에 들었다…

몬몬언니가 기획을 잘 해주고 가르디언니가 디자인을 잘 해줘서 그런거긴 하지만.. 이 사소해보이지만 공이 많이 들어간 트랜지션들을 완성시키고 나니까 내가 만들어 낸 작은 움직임들이 너무 사랑스러워 보였다 지나가세요 infp입니다

 

 

 

+

피카소 화풍으로 코딩하기

 

<meta name="viewport" content="width=device-width,initial-scale=1">

대충 이런게 있다. 각 디바이스별로 출력되는 화면을 최적화시키는 미디어 쿼리인데, 처음엔 이걸 몰라서 pc버전 작업 다 하고 모바일 버전으로 바꿨더니 폰트 비율이 뒤죽박죽으로 되어서 이런….피카소 그림 같은 비율의 형상이….나타났다….

 

비율 어긋났을때의 캡쳐를 찾지 못하여 피카소 그림으로 대체함 . 이는 피카소를 비하하기 위한 목적으로 작성된 글이 아닙니다

이걸 트리브 회의때 팀원들이랑 다같이 봤는데 다들 반응이 와…오…예….. 이랬음ㅜㅜ 이게 개발 환경에서 바로 봤을때랑 웹 브라우저를 통해서 봤을때 차이가 좀 나는데 브라우저로 확인한 건 그때가 처음이라 나도 너무 깜짝 놀라서 회의 끝나자마자 너무 부끄러워서 후다닥 고쳤던 기억이 난다. 지금에서야 웃으면서 할 수 있는 이야기다. 방법을 알아내서 고쳤으니까!!!

 

 

 

---

 

 

다른 이야기

 

https://triv.tistory.com/17

#0. 나는 어떻게 트리브에 들어오게 되었나

 

https://triv.tistory.com/20

#1. 에러를 해결하는 법

 

https://triv.tistory.com/21

#2. 니꿈을 펼쳐…★

 

 

 

같이 보면 좋은 글

 

https://triv.tistory.com/1

[Try편] 너 MBTI가 뭐야?…나? 난 🎀 𝒯𝓇𝒾𝓋 🎀

‘무’ 였던 트리브 웹 랜딩페이지를 0에서부터 기획하고 만들어주신 몬몬언니의 회고입니다. 몬몬언니가 랜딩페이지의 영혼을 빚어주신 덕분에 세상에 나올 수 있게 되었어요~~