개발자
안녕하세요 학원에서 프론트엔드 과정을 공부하고 있는 학생입니다. 여러 웹페이지를 보면 여러 기술들이나 효과들을 볼 수 있는데 그러한 기술들을 만들려고 할 때 대체적으로 어떻게 구글링을 하고 어떻게 찾아서 그 코드를 넣는지 궁금합니다!ㅠㅠ
답변 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 질문자분이 어려움을 겪고 있는게 제가 기술한 문제가 전혀 아니라면 추가 질문 편하게 해주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!