inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Next.js 시작하기(feat. 지도 서비스 개발)

피드백 페이지 이해하기

안녕하세요. 피드백 페이지 구현을 보고 궁금한 것이 있습니다.

511

수수수
1

안녕하세요.

Next.js 강의 너무 유익했습니다.

저는 이 강의를 들으면서 코드 하나하나 이해하기 위해 많이 노력을 했는데요. 이번에 구현하신 피드백 페이지를 보면서 궁금한 점이 생겼습니다.

현재 강의에서 구현해놓으신 피드백 페이지의 경우 달팽이 모양으로 피드백을 입력할 수 있기 구현해놓으셨는데요. 저도 역시 이런 독창적이고 재미있는 페이지를 구현해보고 싶은 마음이 있습니다.

하지만 이런 재미있는 페이지를 구현하는 것 자체가 너무 막막한데요. 이런 페이지를 제가 생각해서 만들기 위한 학습 방법을 추천받을 수 있을까요?

사실 다양한 경험과 많은 고민을 통해 만들어지는 능력이란 걸 알고 있습니다. 그래서 다소 유치한 질문일 수도 있을 거란 생각이 듭니다. 하지만 혹시 따로 이런 페이지를 위해 학습한 방법이 있으신지 궁금해서 여쭤봅니다!

 

 

seo next.js vercel csr ssg ssr

답변 1

0

박용주

안녕하세요! 문의 감사드립니다.

메인 페이지 외에 보너스 페이지가 하나 있으면 좋겠다는 생각을 했었습니다. 만드는 김에 피드백을 받을 수 있는 기능을 추가하고, 또 이왕이면 재밌는 UI로 만들어보자는 마음으로 피드백 페이지를 만들었습니다.

어쩌다 이런 UI를 생각했는지 떠올려보면...제가 봐왔던 여러 레퍼런스를 제 나름대로 재해석하여 조합한 결과라고 생각합니다. 먼저 '포스트잇'이라는 소재는, 어떤 사이트에서 유저의 피드백을 받을 때마다 화면에 새로운 포스트잇이 추가로 생성되는 UI를 본 기억이 났습니다(확실하진 않지만 아마 '토스'의 한 이벤트 페이지로 기억합니다). 다음으로 화면을 무한히 채우는 아이디어는 '구글 쇼핑'의 모바일 페이지에서 착안했습니다.(이것도 지금은 찾을 수가 없네요. 여러 쇼핑아이템이 화면에 가득 차있는 canvas UI 였습니다). 마지막으로 달팽이 회전 UI는 유명한 '달팽이 배열' 알고리즘 문제에서 착안했습니다. 단순히 포스트잇이 추가되는 것보다는 달팽이 모양으로 밀리는 것이 포스트잇을 자연스럽게 배치하기도 쉽고, 재밌겠다고 생각했습니다.

위와 같이 우연히 접해봤던 다양한 사이트, 디자인, 문제에서 아이디어를 얻고 새롭게 조합하는 것이 피드백 페이지를 구현한 방식이었습니다. 그래서 그나마 할 수 있는 답변은, 우연히 보게되는 다양한 사이트를 레퍼런스로 참고하라는 것 같습니다. 좋은 UI/UX를 많이 접해보아야 나중에 새로운 기획/디자인을 생각했을 때 이것이 좋은 UI/UX인지 판단할 수 있는 힘이 길러지는 것 같습니다. 여러 방면으로 많은 것을 접하게되면 자연스럽게 그것들을 조합하는 아이디어도 생길거라 생각합니다. (꼭 웹사이트가 아니더라도 게임이든, 그림이든, 책이든 사고의 재료를 많이 모으는 걸 추천드립니다.)

이 이상의 고차원적인 답변은 저도 할 수준이 되지 않아 양해부탁드립니다ㅎㅎ;
강의 열심히 들어주셔서 감사합니다 :)

0

수수수

네 감사합니다!

저도 더 많은 경험을 통해서 다양한 아이디어와 그 조합에 대해새 생각해봐야 할 것 같네요 ㅎㅎ

정성스러운 답변 너무나도 감사드립니다!

강의 너무 잘 들었습니다!

속았어요 ㅠㅠ, 왕초보인데, gui 이었으면..

0

387

0

페이지네이션 랜더링 질문

0

441

1

서버공부 (Java spring)

0

428

0

신규 강의가 비슷하게 나왔던데

0

428

0

좋은강의

1

597

1

여기 이제 강사님 답변은 볼수없는거에요?

0

468

1

제로초님의 로그인 기능 기초 강의를 들으려면 어떤 강의를 들을면 될까요?

0

387

1

use client 질문 입니다.

0

453

1

백엔드 배포 질문

0

460

0

리액드 디자인 패턴 관련 문의

0

438

1

보충 강의 감사합니다

0

395

0

eslint 설치후 eslint.config.mjs 파일 생성이되고 .eslintrc.js 는 없습니다.

0

580

0