2024/07/22 2

와팔라이저(Wappalyzer) 활용해서 웹사이트에 사용된 기술 스택 확인하기

웹 개발의 끊임없이 진화하는 풍경에서 앞서 나가는 것은 매우 중요합니다. 다양한 웹사이트에서 사용되는 기술과 도구를 이해하는 것은 귀중한 통찰력과 영감을 제공할 수 있습니다. 바로 Wappalyzer입니다. 이 강력한 브라우저 확장 프로그램은 개발자, 마케터, 그리고 기술 애호가들이 단 몇 번의 클릭만으로 어떤 웹사이트 뒤에 숨겨진 기술을 발견할 수 있도록 도와줍니다.Wappalyzer란 무엇인가요?Wappalyzer는 웹사이트에서 사용되는 기술을 식별하는 브라우저 확장 프로그램입니다. 콘텐츠 관리 시스템(CMS)과 전자상거래 플랫폼에서 웹 서버와 JavaScript 프레임워크에 이르기까지, Wappalyzer는 방문하는 사이트를 구동하는 기술의 종합 목록을 제공합니다. 이 정보는 경쟁 분석, 기술 선택..

피그마(Figma) - 영역 초과하는 텍스트에 말줄임표(...) 넣기(Truncate Text)

영역을 초과하는 텍스트가 발생하면 말줄임표(...)로 더 많은 텍스트가 있음을 사용자에게 알려 주는 것은 일반적인 UX 디자인 패턴 중 하나입니다. CSS에서는 'text-elipsis'와 같은 값을 통해 지정이 가능한데, 피그마에서도 이를 구현할 수 있습니다.  텍스트가 특정 영역을 초과했을 경우에는 해당 텍스트 레이어의 모드를 'Fixed size'로 변경해 주어야 합니다. 텍스트가 컨테이너 안에 배치되는 형식을 취해야 하기 때문입니다. 너비 설정은 고정값으로 해도 되지만, 컴포넌트 안에서 이용되는 경우 'Fill Container'로 설정하여 유동적으로 너비가 설정되게 하는 것이 더 좋을 수 있습니다. 이렇게 값을 설정하면 텍스트가 자동으로 줄바꿈이 되는 상태가 된 것을 확인할 수 있습니다. 이후에..