본문 바로가기

프로젝트

 (34)
[ 애플 웹사이트 클론 ] 현재 스크롤 섹션에 따른 아이디값 부여 현재 스크롤섹션의 아이디값에 따라 다른 태그들을 보여주기 위해서, 아이디값을 부여해보자. 아래와 같이 CSS가 적용이 되어있다. .sticky-elem { display: none; position: fixed; top: 0; left: 0; width: 100%; } #show-scene-0 #scroll-section-0 .sticky-elem, #show-scene-1 #scroll-section-1 .sticky-elem, #show-scene-2 #scroll-section-2 .sticky-elem, #show-scene-3 #scroll-section-3 .sticky-elem { display: block; } 기존의 sticky-elem이라는 class는 display:none;이기 때문..
[ 애플 웹사이트 클론 ] 현재 스크롤 섹션 지정하기 스크롤 섹션마다의 높이를 세팅했으면, 이제 스크롤을 내릴 때마다 몇 번째 스크롤 섹션에 있는 지 지정을 해주어야한다. 스크롤이 내려갈때마다, 현재 스크롤섹션을 감시하는 함수를 만들어주어야한다. 순서는 다음과 같다. 이벤트리스너 "scroll"이 실행될때마다, 함수가 실행되도록 한다. 그 함수에는 스크롤높이에 따라 현재 섹션을 지정해준다. 가장 먼저, 다음과 같은 변수를 선언해준다. let yOffset = 0; let prevScrollHeight = 0; // 현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤섹션높이들의 합 let currentScene = 0; //현재 활성화된 (눈 앞에 보고있는 씬 = 스크롤섹션) yOffset은 현재까지 스크롤된 높이를 알려주는 변수이다. prevScro..
[ 애플 웹사이트 클론 ] 스크롤 섹션 높이 세팅하기 각 div태그에 스크롤높이값을 일정하게 지정해주어, 스크롤애니메이션을 구현해야한다. 그러기 위해서는 가장 먼저, 스크롤 섹션을 태그에 아이디값으로 지정해주고 창 크기가 변할 때마다, 달라지는 스크롤높이들을 스크롤섹션에 적용해주어야한다. 첫 번째로, 아래와 같이 스크롤섹션이라는 아이디값을 통해 섹션을 나누어 준다. AirMug Pro 온전히 빠져들게 하는 세라믹 주변 맛을 느끼게 해주는 주변 맛 허용 모드 온종일 편안한 맞춤형 손잡이 새롭게 입가를 찾아온 매혹 두 번째로, 다음과 같은 배열로 스크롤섹션들을 관리해주자. 여기서 querySelector를 통해, DOM요소에 접근하여 각 스크롤섹션태그들을 불러왔다. const sceneInfo = [ { //0 type: "sticky", hieghtNum: ..
[ 항해99 실전프로젝트 ] 발표영상 제작 옛날에는 발표하는 거 꽤나 즐겼던 거 같은데, 발표영상 제작하려니 생각보다 힘이 든다. 일단 발음이 많이 꼬인다. 그리고 말 끝이 점점 흐려진다. 그리고 내 프로젝트니까 대본없이도 술술 내용을 잘 전달할 수 있을 줄 알았는 데, 아닌 것 같다. 대본을 쓰기로 결정했다. 피피티 디자인도 얼른 바꿔야 한다. 뭔가 계속해서 네온사인컨셉을 밀고싶어서, 디자인이 조금 촌스러운데도 고집하게 된다. 학교다닐때도, 항상 뭔가에 꽂히면 아닌걸 알면서도 밀고 나가다가 좋은 점수를 받지 못한 적이 많다. 그래도 나는 우리 프로젝트가 네온사인으로 시작해서 네온사인으로 끝났으면 좋겠다. 적어도 사람들 머리 속에 오래 기억될 것이다. 최대한 대본을 안쓰는 방향으로 가고 싶다. 내가 나를 소개하는 데, 대본을 굳이 만들어야 하는 ..
[ 항해99 실전프로젝트 ] 최종발표구상 30초 : 서비스 기획 배경 설명 프로젝트를 기획하게된 계기는 번화가를 갈때마다 생겨나는 보드게임카페를 보며 그만큼 사람들도 많이 이용을 할까?라는 생각에서 출발하게되었습니다. 그리고 디자인에 대해 술집같다는 얘기가 많았는 데, 최근 보드게임 대중화가 이루어지면서 성인들이 밤에 즐기는 문화중 하나로 자리잡은 만큼 어두운 밤골목의 보드게임카페를 생각하며 기획을 했다는 점 감안해주시기 바랍니다. (생략) 하여튼 저희 보드윗은 "언제나 내 곁에, 다양한 사람들과 다양한 보드게임을" 이라는 슬로건으로 보다 간편하게 보드게임 파티원 매칭 서비스를 제공하고있습니다. 1분 30초 : 서비스 시연 영상 https://www.youtube.com/watch?v=wMCSIGudH9g 2분 : 서비스 아키텍쳐 설명 및 기술..
[ 항해99 실전프로젝트 ] 최종발표까지 D-7 사실, 내가 원하는 바는 최종발표까지 날짜가 남지않아서 더 열심히하는게 아닌 항상 최선을 다해서 열심히하고 싶다. 항해를 시작하면서 그렇게 마음을 다졌었지만 , 지난 2주 간 왠지 모르게 마음이 조금 풀어져있었던 것 같다. 지나간 건 그렇고, 앞으로 항해99수료까지 2주정도 남았는데, 여지껏 그래왔듯 다시 한 번 최선을 다해볼 생각이다.절대 미련이 남으면 안된다. 최종발표가 다음주인데, 다음주가 지나고 나면 면접준비이기때문에 일단 최종발표까지의 계획을 세워보자. 계획에서 크게 두 가지로 카테고리가 나뉠 것 같다. 하나는 우리 프로젝트의 코드 리팩토링과 유저경험피드백을 바탕으로 좀 더 사용성을 개선하는 것이고 둘째는 발표내용과 발표영상, 그리고 회사에게 우리가 어필할 브로셔 및 소개를 적는 것이다. ( 여..
[ 항해99 실전프로젝트 ] 런칭 이후, 사소한 오류 바로잡기 일단 구글폼에 작성된 오류들부터 바로잡기로 하였다. 사용자분들이 설문조사에 엄청 자세하게 오류들을 나열해 주셔서, 이 답변에 적힌 모든 오류들부터 해결해보자. 필터에 여유 보통 마감 여부가 추가되었으면 좋겠어요!! 모바일 환경에서 마이페이지 신청중인 모임 클릭 시, 모달 이상하게 뜸. accessToken이 만료되었을 때 리디렉션이 안되는 것 같습니다. 파티모집의 좌상단에 있는 버튼이 위치기반 추천인듯 한데 여러번 눌러도 매번 동일한 추천이 뜨는게 아쉽습니다. 그리고 한개만 뜨는것 같은데 여러개 뜨면 더 좋을것 같습니다. 게시글 작성 유효성 걸어주기 페이지 상단의 글자 폰트 크기나 조명 여부가 통일이 되면 좋을 것 같다. (검색페이지) 검색을 했을 때 아무 모임이 없으면 “ 아무런 모임도 검색되지 않았어..
[ 항해99 실전프로젝트 ] 프로젝트 실제 런칭 당일 후기 오늘은 어찌저찌 최대한 빠르게 유저피드백을 참고하는 편이 나을 거 같아, 런칭을 하게 되었다. 현재 브로셔는 디자이너님이 제작하시는 데까지, 시간이 조금 걸릴 것 같아서 급하게 미리캔버스를 통하여 제작해보았다. 디자인과지만, 미리캔버스를 처음 이용해보았고 너무 간편하고 생각보다 퀄리티도 높아 깜짝 놀랬다. 자주 이용할듯. 우리가 강조하는 기능은 아래 5가지로 추려보았다. 보드게임 파티원 모집 파티원끼리 사용할 수 있는 실시간채팅방 커스텀 아바타 파티조건 검색 및 가장 가까운 파티 즉시 찾기 랭킹시스템 실제 우리의 프로젝트를 유저들이 이용하면 ,어떤 피드백들이 주로 나올 지 궁금했다. 약 3시간동안, 37번의 회원가입이 진행되었고 그 중 14분이 설문조사를 작성해주셨다. (감사하다!) 요약해서, 가장 많이..

티스토리툴바