예쁜 사이트 클론하기
탐닉 사이트 너무예쁘다고요!
사실 사이트가 예쁘기보다 그냥 작업물 전체가 너무 예쁜 탐닉, 인스타그램에서만 보다가 어제 사이트에 들어가보고 저 가운데 빙글빙글 돌아가는거 따라만들라다 일부를 클론하게 되었음. 저 작업물만 가지고는 느낌이 안살았음 ㅎㅎㅎ
웹개발 종합반 수료 이후에 전혀 공부를 안하고있기도해서 간단하게 클론을 시작함.
평범한 헤더 바디 바텀 구조인것 같지만 헤더는 플로팅 되어있었음. 이건 하지 못하고 쉬기로함...
내가 이 클론작업을 시작하게 된 계기가 저 가운데 돌아가는건뎅 저걸 애프터이펙트로 만들 수 있다고해서 당장 켜봤는데,,, 잘 모르겠어서 c4d lite까지 넘어감. 애프터이펙트를 깔면 같이 깔림. 하지만 유튜브 자료들은 거의 정식 c4d 기준으로 되어있어서 뭘 해야할지 모르고있다가 그냥 일부 효과가넘어가는 오브젝트로 마무리했음. 내 예상과는 살짝 다른 결과물쓰...
c4dlite 안에서 모델링을 전부 진행하긴 어려울 것 같고, 다른 모델링 툴등을 이용해서 가져와서 그걸 애펙으로 가져다 쓰면 좋을 것 같았음.
금속재질에 트위스트
애펙으로 돌아와서 타임라인에서 내보낼 부분만 설정, 애펙과 시포디 사이의 타임라인 설정이 다른데 왜그런지 모르겠음...?_?...
미디어 인코더 큐로 하면 gif로 바로 내보낼 수 있음.
나는 서버같은게 없기 때문에, imgur에 이미지를 업로드함 ㅋㅋㅋ
다음엔 더 멋진걸 만들겠노라...
아무튼 이미지가 준비되었으니 이제 진짜 클론작업을 시작해봄.
로고는 대충 비슷한 서체로 올려서 svg로 내보낼 예정. 아마 div설정을 잘못한것 같은데 쭉쭉 내리는 식으로 div를 만들었다. 메뉴/슬로건/gif/marquee/imagegrid/contactform/gif/footer
물론 개발자도구로 면밀히 살펴보면 패딩값이나 폰트사이즈는 물론 div 구조까지 파악해서 따라할 수 있겠지만... 시간도 그렇고 눈썰미도 키울겸 서체확인/강조색 정도만 확인하고 피그마로 따라그렸다.
그리고 파이참으로 넘어왔는데, html만 있으면 되는데... 그거만 만드는법을 까먹은듯하다^^...
프로젝트 단위로 파일이 생겨버려서.... css 별도로 작업했다. 아주 여러개의 파일을 만들어주었지만 그 두가지만 사용함.
나 어릴때는 <marquee>라는 태그도 쓰고 그랬는데... 마퀴유행이 돌아왔지만 css로 써야하는것 같다...?
아마도?
https://tympanus.net/codrops/2020/03/31/css-only-marquee-effect/
마퀴 css 부분은 여기에서 가져왔다.
다른건 어려운게 없었다 왜냐... 첫번째 마퀴까지만 작성했기때문^^...
너무힘들어서 잠시 쉬기로함.. 이미지그리드 부분에서 인터렉티브 연습하려고했는데 마퀴하느라 시간다잡아먹음... 잠시 쉬었다가 다음에 해야지...
대충 이런느낌쓰... 물론 툴 다루는능력도 중요하겠으나, 마퀴인터렉티브와 입체적인 로고, 폰트나 컬러등이 조화롭기 때문에 예쁜 것 같다. 그런 센스는 어찌배우는 것일까... 클론을 여러개 더 해보고 싶고, 인터렉티브를 많이 배우고 싶어졌다.... 마퀴도 어려운데...다른건 어쩐담..
https://dailyul.github.io/clonestudy_tn/깃허브에 올려두었다.
