안녕하세요.
Next.js 강의 너무 유익했습니다.
저는 이 강의를 들으면서 코드 하나하나 이해하기 위해 많이 노력을 했는데요. 이번에 구현하신 피드백 페이지를 보면서 궁금한 점이 생겼습니다.
현재 강의에서 구현해놓으신 피드백 페이지의 경우 달팽이 모양으로 피드백을 입력할 수 있기 구현해놓으셨는데요. 저도 역시 이런 독창적이고 재미있는 페이지를 구현해보고 싶은 마음이 있습니다.
하지만 이런 재미있는 페이지를 구현하는 것 자체가 너무 막막한데요. 이런 페이지를 제가 생각해서 만들기 위한 학습 방법을 추천받을 수 있을까요?
사실 다양한 경험과 많은 고민을 통해 만들어지는 능력이란 걸 알고 있습니다. 그래서 다소 유치한 질문일 수도 있을 거란 생각이 듭니다. 하지만 혹시 따로 이런 페이지를 위해 학습한 방법이 있으신지 궁금해서 여쭤봅니다!
안녕하세요! 문의 감사드립니다.
메인 페이지 외에 보너스 페이지가 하나 있으면 좋겠다는 생각을 했었습니다. 만드는 김에 피드백을 받을 수 있는 기능을 추가하고, 또 이왕이면 재밌는 UI로 만들어보자는 마음으로 피드백 페이지를 만들었습니다.
어쩌다 이런 UI를 생각했는지 떠올려보면...제가 봐왔던 여러 레퍼런스를 제 나름대로 재해석하여 조합한 결과라고 생각합니다. 먼저 '포스트잇'이라는 소재는, 어떤 사이트에서 유저의 피드백을 받을 때마다 화면에 새로운 포스트잇이 추가로 생성되는 UI를 본 기억이 났습니다(확실하진 않지만 아마 '토스'의 한 이벤트 페이지로 기억합니다). 다음으로 화면을 무한히 채우는 아이디어는 '구글 쇼핑'의 모바일 페이지에서 착안했습니다.(이것도 지금은 찾을 수가 없네요. 여러 쇼핑아이템이 화면에 가득 차있는 canvas UI 였습니다). 마지막으로 달팽이 회전 UI는 유명한 '달팽이 배열' 알고리즘 문제에서 착안했습니다. 단순히 포스트잇이 추가되는 것보다는 달팽이 모양으로 밀리는 것이 포스트잇을 자연스럽게 배치하기도 쉽고, 재밌겠다고 생각했습니다.
위와 같이 우연히 접해봤던 다양한 사이트, 디자인, 문제에서 아이디어를 얻고 새롭게 조합하는 것이 피드백 페이지를 구현한 방식이었습니다. 그래서 그나마 할 수 있는 답변은, 우연히 보게되는 다양한 사이트를 레퍼런스로 참고하라는 것 같습니다. 좋은 UI/UX를 많이 접해보아야 나중에 새로운 기획/디자인을 생각했을 때 이것이 좋은 UI/UX인지 판단할 수 있는 힘이 길러지는 것 같습니다. 여러 방면으로 많은 것을 접하게되면 자연스럽게 그것들을 조합하는 아이디어도 생길거라 생각합니다. (꼭 웹사이트가 아니더라도 게임이든, 그림이든, 책이든 사고의 재료를 많이 모으는 걸 추천드립니다.)
이 이상의 고차원적인 답변은 저도 할 수준이 되지 않아 양해부탁드립니다ㅎㅎ;
강의 열심히 들어주셔서 감사합니다 :)
답글
수병수병
2023.08.27네 감사합니다!
저도 더 많은 경험을 통해서 다양한 아이디어와 그 조합에 대해새 생각해봐야 할 것 같네요 ㅎㅎ
정성스러운 답변 너무나도 감사드립니다!
강의 너무 잘 들었습니다!