프로젝트 (34) 썸네일형 리스트형 [SEOK-BONG] 생각보다 빠른 진행상황 (2편) 어제가 처음으로 팀원과 회의한 날이였고, 오늘은 그 다음날이다. 피그마를 보니, 디자인이 거진 완성되어있었다..? 아무래도 기능이 적고, 페이지 수도 적어서 빠르게 해결하신 것 같았다. 퀄리티도 시간대비 절대 떨어지지않게 잘 뽑아내신 것 같다. SEOK-BONG의 무궁무진한 잠재력을 보았다.. 아래는 피그마사이트에서 디자이너님이 디자인하신 화면이다. 나도 기존에 서비스의 기능을 대충 코드로 짜놓았기때문에, 약간의 디자인만 얹혀서 빠르게 코드를 짜보았다. 결론은 하루만에 거의 모든 페이지를 완성할 수 있었다. 물론 분기처리 등 해야할 게 많을 수도 있음. 지금까지 SEOK-BONG의 기능은 아래와 같이 정리할 수 있다. 글쓰기 링크 공유하기 결과물 캡쳐하기 결과물 꾸미기 (폰트, 배경이미지) GA(구글 애.. [SEOK-BONG] 처음으로 모르는 사람을 설득해, 프로젝트를 진행하였다. (1편) 원티드챌린지 디스코드 커뮤니티방에 글을 올렸다. "디자이너 구함" 최근들어, 혼자 여러 아이디어들을 기획하고 있었는데 항상 끝까지 결과물로 이어지지않았다. 결과물로 이어지지않으니, 뭔가 남는 게 없는 느낌이라 팀원을 구하기로 결심했다. 그래야 일말의 책임감을 가지고서라도 완성된 결과물을 내리라고 생각했다. 그렇게 나는 디스코드에 디자이너 한명을 구하기로 하였다. 많은 팀원은 필요없었다. 서버는 supabase를 이용할것이고, 프론트는 내가 하면 되었기때문에 디자인부분을 맡아줄 디자이너 한 명이면 족했다. 나의 책임감을 길러주기에도 한 명이면 충분했다. 물론 여러 명일수록 책임감은 더 커졌겠지만. 디스코드에 글을 올린 뒤 총 4분의 연락이 왔었는데, 디스코드를 잘 이용하지않은 탓에 3일 뒤에야 메세지를 확.. 테오의 스프린트 14기 후기 테오의 스프린트 14기를 저번달에 진행했는데, 지금에서야 적는다. (아쉽아쉽) TIL이랍시고, 매일 적는 것에 지쳐 한동안 쉬었던 것 같다. 항해99라는 부트캠프를 떠나서, 진행하는 첫 협업프로젝트였다. 3박4일이라는 짧은 기간동안 하나의 서비스를 완성하는 방식이였기에, 퇴근하고 3~4시간을 투자해야 했고 생각보다 힘들었다. 첫째날 첫날에는 자기소개와 여러가지 템플릿을 사용해서, 아이스 브레이킹을 진행했다. 우리 조는 다들 내향적이라서, 진정으로 아이스 브레이킹이 되지는 않았던 것 같다. 이제와서 돌아보면, 좀 더 스몰톡이나 친해졌다면하는 아쉬움이 조금 남아있다. 둘째날 둘째날에는 우리가 정한 아이디어에 대해서 좀 더 구체적인 계획 및 방향을 세워봤다. 여러가지 정해진 커뮤니케이션방식을 사용해서, 좀 더.. [ 애플 웹사이트 클론 ] 캔버스 드로우 애니메이션 적용하기 2 저번 포스팅에서는 캔버스 내에서 좌우 흰색 영역을 설정하는 것까지 진행했었다. 이제 그 흰색 영역들의 X좌표를 이용하여, 스크롤에 따라 옆으로 이동시켜주기만 하면 된다. 구현순서는 아래와 같다. 캔버스가 시작하는 타이밍의 Y좌표 그 Y좌표부터 시작하여 스크롤섹션이 끝날때까지 애니메이션 설정 간단하다. 그럼 바로 Y좌표 (시작점)을 구해보자. 가장 간단한 방법으로는 getBoundingClientRect()라는 내장메소드를 사용하는 것이다. domRect = element.getBoundingClientRect(); 위의 메소드를 사용하면, 상대적인 뷰포트와 Y,X값 모두 알 수 있다. 하지만, 스크롤을 빠르게 느리게할때마다 다른 값이 출력되 이 방법으로는 딱 떨어지는 정밀한 애니메이션을 구현할 수 없다는.. [ 애플 웹사이트 클론 ] 캔버스 드로우 애니메이션 적용하기 1 이제 다음 구현해야할 애니메이션은 아래와 같다. 캔버스태그에 이미지를 그린 뒤에, 이미지가 스크롤을 내릴수록 점점 차오르는 애니메이션을 구현할 차례다. 점점 차오르는 구간은 이미지의 크기가 변하는 것이 아니라, 양 옆의 흰색 영역을 추가하여 흰색 영역의 X좌표를 조절하여 구현할 것이다. 그러기 위해서는 아래와 같은 순서가 필요하다. 캔버스가 윈도우창 비율에 맞게 항상 꽉 차야한다. 캔버스 양 옆에 흰색 영역을 그려, 스크롤을 내릴때마다 양 옆으로 좌표를 이동시켜준다. 가장 먼저, 캔버스태그를 윈도우창에 꽉 차게 만들어보자. const widthRatio = window.innerWidth / objs.canvas.width; const heightRatio = window.innerHeight / obj.. Vanilla JS로 SPA(싱글페이지) 구현하기 리액트 라이브러리만 써오다가, 바닐라 JS로 무언가를 만들 생각을 하니 벌써부터 막막하다. 하여튼, 넘블이라는 곳에서 챌린지를 신청하여 바닐라JS로 SPA를 만들어보기로 했다. 가이드라인 페이지는 아래와 같다. 필요한 조건은 API를 통해, 데이터를 불러와 동적으로 메인페이지를 구성해야함. 디테일페이지에서 해당 데이터를 불러와, 구성해주어야함. 글쓰기페이지 중요한거는 SPA로 구현을 해야한다는 점이다. 기존의 자바스크립트는 페이지를 이동할 때마다, url에 따라 정적파일을 서버로부터 받아오는 형태라면 SPA는 첫 로드시에 모든 html파일들을 다운받아 놓고 사용한다. 페이지는 굉장히 단순한데, 결국 라우팅을 어떻게 처리하냐가 관건일 것 같다. 그래서 바닐라JS로 라우팅을 구현하는 것에 대해 구글링을 시작.. [ 애플 웹사이트 클론 ] 비디오에 스크롤 애니메이션 적용하기 비디오를 스크롤 애니메이션으로 보여주기 위해서는 세 가지의 방법이 존재한다. 비디오의 길이를 이용해서, 스크롤된 비율에 따라 비디오의 해당 구간을 보여주는 방식 비디오 프레임대로 이미지를 추출해서, 각 구간의 이미지를 보여주는 방식 위와 비슷하게 이미지를 추출해서, 캔버스태그에 각 구간의 이미지를 그려 보여주는 방식 첫 번째의 비디오를 그대로 사용하는 방식은 이미지를 추출해서 사용하는 방식보다 부드럽지 못하고, 파일크기가 조금 더 커지기 때문에 패스했다. 두 번째 방식은 확장성면에서 세 번째 방식보다 떨어진다고 생각했다. 지금은 하나의 이미지만을 화면에 보여주기 때문에, 큰 문제가 없을 것으로 보이나, 훗날 여러 개의 이미지를 겹쳐서 보여줘야하는 경우가 생길때 이미지태그는 여러 개의 이미지태그를 사용해야.. [ 애플 웹사이트 클론 ] 특정 구간에 스크롤 애니메이션 적용하기 스크롤이 될때마다, 현재 보고있는 스크롤섹션을 지정해주었으면 이제 지정된 스크롤섹션마다의 애니메이션을 적용해주어야 한다. 그러기위해서는 다음과 같은 값이 필요하다. 해당 스크롤섹션 내에서 스크롤이 어느 정도 내려갔는 지 애니메이션에 필요한 스타일 시작지점과 끝지점 다음과 같이 변수명을 설정해준 뒤, 시작값, 마지막값, 시작지점과 끝지점을 할당해준다. messageA_translateY_in: [20, 0, { start: 0.15, end: 0.2 }] 위의 변수명을 통하여 다음과 같이 해석할 수 있다. translateY로 20%에서 0%로 움직이게되고, 해당 스크롤섹션에서 15%에서 시작해 20%에서 끝이난다. calcValues라는 함수를 만들어, 특정 css값을 주는 계산을 실행해준다. funct.. 이전 1 2 3 4 5 다음
