인프런 커뮤니티 질문&답변
작성한 질문수
안녕하세요! UI왕초보가 질문드립니다.
작성
·
316
1
선생님 강의로 UI공부를 시작한 왕초보 수강생입니다.
선생님께서는 예제 파일을 만들으시면서 사이즈 부분을 단순히 클릭만 하면 265사이즈로 자동지정되어 구매 확정 페이지로 연결되도록 디자인하셨는데요.
저는 이 부분에서 "사이즈를 선택하세요" 부분을 클릭하면, 스크롤바 형식으로 220~300까지의 모든 사이즈 목록이 나오고 거기에서 특정 사이즈를 선택하는 형식으로 보다 디테일하게 디자인해보고 싶다고 생각하였습니다.
해서 질문드릴 내용은 세 가지 입니다.
1. 좁은 영역 내에 스크롤바를 이용하여 많은 내용을 담고자 한다면 어떤 기능을 이용해 어떻게 표현할 수 있나요?
2. 프로토타이핑을 할 때에, "사이즈를 선택하세요" 부분을 클릭하면 다른 영역은 움직이지 않고 사이즈 목록만 위에서 아래로 내려오는 효과로 나오게 하는 것이 가능한가요? (사이즈 목록은 좁은 직사각형 영역 내에서 스크롤바를 통해 종대로 삽입하고 싶습니다.)
3. 특정 영역을 클릭하였을 때, 화면 일부분에만 알림창 형식으로 창을 띄우고자 한다면 어떻게 표현해야하나요?
이상입니다! 좋은 강의 항상 감사드립니다^^
제 질문이 난해하여 선생님께서 혹 이해하기 어려우실까싶어 적당히 예시 사진을 첨부해보았습니다.
답변 1
1
안녕하세요. 좋은 질문 감사합니다.
먼저 3번부터 대해서 말씀을 드리겠습니다.
3번 답변: 원하시는 알림창을 만들기 위해서는 해당 프레임 크기에 해당하는 사각형 레이어를 만들어주고 어두운 색으로 Fill을 해준 후 Opacity를 낮춰주면 배경이 만들어집니다. 그런 후, 그 위에 흰색 또는 원하시는 색으로 사각형 레이어로 원하는 사이즈의 팝업을 만들어주시면 됩니다.
제가 예시로 더미 형태로 만들어서 캡쳐했습니다.
프레임 전체를 덮어주는 사각형 레이어를 만들어주세요.
사각형 레이어를 위에 만들어주시면 팝업을 만드는 게 됩니다.
다음은 2번에 대한 답변입니다.
이를 위해서는 두가지를 해주셔야 됩니다. 첫번째로, 해당 팝업을 화면 상단에 두시고 Fix position 해주셔야 합니다. 그 다음에는 프로토타이핑을 할 때에 Preserve scroll position을 체크해주셔야 됩니다.
Fix position 체크해주세요
Preserve scroll 포지션을 해주시면 클릭을 했을 때에 화면이 다시 맨위로 올라가는 현상 없이 프로토타이핑이 가능합니다.
1번은 프로토타이핑의 고급기능인데 Vertical Scrolling으로 가능할 것으로 생각되나 저 역시 아직 해보지 않아서 지금 답변드리기는 어려울 것 같습니다. 혹시 방법을 알게 되시면 공유해주시면 감사하겠습니다^^