개발자

<프론트엔드> 웹페이지 작업중 기술 구현 질문이에요!

3월 26일조회 52

안녕하세요 학원에서 프론트엔드 과정을 공부하고 있는 학생입니다. 여러 웹페이지를 보면 여러 기술들이나 효과들을 볼 수 있는데 그러한 기술들을 만들려고 할 때 대체적으로 어떻게 구글링을 하고 어떻게 찾아서 그 코드를 넣는지 궁금합니다!ㅠㅠ

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

조세영님의 프로필 사진

개발 중에 레퍼런스로 여러 사이트들을 둘러보시고, 거기서 벤치마킹하거나 비슷하게 만들어보고싶다 하는 요소들을 어떻게 찾아보고 적용할지 질문주신것 같네요. 사실 질문자분이 구체적으로 어떤 기술이나 ui들을 벤치마킹하시려고 하는지 질문에 나와있지 않아서 일반적인 답변을 드리긴 어려울 것 같긴 하지만, 아마 시각적인 요소들에 대한 것들이 많을것 같아요. 이런 경우는 질문자분이 시각적 요소나 인터랙션 관련된 용어들을 먼저 아시는게 중요합니다. 그래야 키워드 검색을 통해 구글링을 잘 할 수 있고, AI에게 질문할때도 훨씬 수월할 수 있어요. 예를 들어 볼게요. 여러 회사 랜딩페이지나 상품 소개 페이지들에 보면, 여러 사진들이 순서에 맞게 사진들이 앨범 넘기듯이 주기적으로 넘어가는 효과들을 종종 볼 수 있는데요, 이건 캐러셀이라고 부릅니다. 이것을 구현해보고 싶으시면 구글에 자바스크립트 캐러셀 또는 리액트 캐러셀이라고 검색하시면 잘 나올거에요. 캐러셀 중에서도 무한히 반복되는 것은 infinite carousel, loop carousel등으로 불리고 있어요. 또 하나 예를 들자면, 모던하고 잘 디자인된 랜딩페이지들을 보면 스크롤을 내릴때 텍스트나 사진들이 없다가 살짝 떠오르면서 나타나는 효과들도 많이 볼 수 있어요. 이런 효과는 구글에 Fade in text, float in text 등으로 검색하시면 나올거에요. 적절한 예시를 들어드렸는지 모르겠네요. 만약 질문자분이 찾으시는게 이런 시각적인 효과들 위주가 맞다면, 여러 ui나 효과들을 보면서 각각에 대응되는 용어들에 익숙해질 수 있는 ui 라이브러리들을 추천해드릴게요. https://ui.aceternity.com/components https://www.reactbits.dev/text-animations/split-text https://motion-primitives.com/docs 질문자분이 어려움을 겪고 있는게 제가 기술한 문제가 전혀 아니라면 추가 질문 편하게 해주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!