내일배움캠프 CH1 미니프로젝트 (４일차

✅241024

· 각오 페이지 피드백 반영해서 수정하기

· 작업물 합치기

· 발표 자료 준비하기

---

📋팀 프로젝트 - 팀 소개 페이지 제작

 

프로토타입 - 클릭하면 사진 넘어가게 만들기

다음 사진(or 화살표) 눌렀을 때 넘어가게 만들기

 

프레임을 복사해서 navigate to로 넘기는 방법이 가장 쉽겠지만, 다른 팀원들 작업물과 합쳐야하기

때문에 다른 방법을 알아보기로 했다

 

마침 오버레이 기능도 발견

화면 전체가 넘어가는 것 말고 딱 사진부분만 바꾸고 싶어서 고민하다가 사진 크기에 딱맞는 프레임을 만들어서 한 장씩 올려보기로..

 

오픈 오버레이 적용

사진이 넘어가는 것 처럼 보이긴 하지만 레이어가 쌓이는 모습도 같이 보이는 문제 발생

 

position → manual

이것저것 시도해보다가 포지션을 수동으로 맞출 수도 있다는 사실을 알게됨

오버레이 될 위치를 manual 기능으로 딱 맞게 맞추면

깔끔하게 넘기기 성공 !!

오픈 오버레이 영상.mp4

0.09MB

 

---

❇️TIL

피그마에서 '오픈 오버레이' 기능을 이용해 클릭하면 사진이 넘어가는 프로토타입을 만들어보았다. 처음에는 단순한 화면 전환을 시도했지만, 여러 기능을 탐색하다가 '오픈 오버레이'가 사진 갤러리처럼 이미지가 겹쳐서 표시되는 데 적합하다는 것을 알 수 있었다. 각 이미지에 'On Click' 트리거를 설정하고, 클릭 시 다음 사진이 오버레이로 나타나도록 연결했다. 포지션을 조정하면 원하는 위치에 자연스럽게 나타나도록 만들 수 있다는 것도 배웠다. 여러번 실패하긴 했지만 내가 원했던대로 결과가 나와서 뿌듯했다. 앞으로 더 다양한 화면을 표현하기 위해 프로토타입 기능을 더 공부해봐야겠다!!