목록모바일 (47)
알씨타운
안녕하세요. 알씨타운 입니다. 혹시 반려동물과 함께 생활하고 계시는가요? 맥스 본, 펫 소 시크, 밀크 앤 페퍼 3개 브랜드의 한국 공식 수입사인 꼬띠샵을 아시나요. 마스코트 꼬띠가 홍보하고 있는 애견 전문 몰입니다. 맥스 본은 비욘세, 기네스 펠트로 등의 할리우드 스타의 사랑을 받고 있고, 펫 소 시크의 경우는 명품 브랜드 출신 디자이너가 상품 제작에 참여했다고 해요. 반려동물의 시각에서 바라본 좋은 디자인을 더 많은 반려인과 나누고 싶어 탄생하게 되었다고 합니다. 귀여운 마스코트 꼬띠가 있는 꼬띠 숍 둘러볼까요? https://cotieshop.co.kr/ 사용 폰트와 색상 사용 폰트는 3가지이며 주력 색상들은 블랙 흰색 회색 베이지 차분한 계열의 색상을 사용하였고 포인트 컬러로 밝..
안녕하세요:) 알씨타운입니다. 오늘의 기술리뷰는 Core Web Vitals입니다. 다들 한 번씩 사이트를 들어가면서 접속이 느린 페이지를 종종 보셨으리라 생각합니다. 처음 사이트를 제작하셨는데, 속도가 너무 느려 사이트를 최적화할 게 무엇인지 잘 모르신다면, 이번 포스팅이 도움이 되었으면 좋겠습니다. 코어 웹 바이탈(Core Web Vitals)은 웹 콘텐츠 이용자의 사용 경험에 영향을 미치는 다양한 측정값을 이릅니다. 간단하게 말하자면, 웹 페이지에 접속, 이동, 클릭 같은 다양한 사용자의 행위를 측정한 값이라고 생각하시면 됩니다. 구글에서는 특히 3가지 LCP / FID / CLS 를 중요하게 생각합니다. LCP는 HTML 즉, 브라우저 화면에 전체가 렌더링 완료되는 시간을 말합니..
안녕하세요 :) 알씨타운입니다. 요즘에 k-culture라는 단어를 많이들 들어보셨으리라 생각합니다. kpop의 세계적인 대중성을 가지게 되면서 kpop 굿즈상품 md상품이 선풍적인 인기를 가지게 되었습니다. 그래서 오늘 준비한 리뷰는 https://www.withmuu.com/ 꿈이 이루어지는 공간 WITHMUU www.withmuu.com 사이트 컨셉 메인페이지 메인페이지를 보시면 세 가지의 버전의 화면을 볼 수가 있습니다. pc / 1280px / 768px 버전의 반응형 처리를 했습니다. 저희는 모바일 웹을 분석하기 앞서 pc와 모바일의 차이점을 짚어보고 가려고 합니다. pc버전에는 scroll 이벤트가 중요한 포인트 입니다. 스크롤 되면서 1. 모바..
안녕하세요 :) 알씨타운입니다. 요즘에 날씨가 매우 무더워지고, 이른 장마가 시작되었습니다. 그 만큼 오프라인에서 구매하는 소비자보다 온라인에서 구매하는 소비자가 늘어나고 있습니다. 그래서 이번에 준비한 웹 리뷰는 '롯데 ON' 사이트 리뷰입니다. 쇼핑 웹 사이트 같은 경우 모바일 사용자가 많아 모바일 위주의 리뷰를 진행하겠습니다. https://www.lotteon.com/m/display/main/lotteon?mall_no=1 나에게 딱 맞는 상품을, 나에게 딱 맞는 가격으로! 쇼핑의 모든 것 LOTTE ON! www.lotteon.com mobile web '롯데 ON'은 적응형 웹사이트로 되어있습니다. pc버전과 mobile 버전 각각의 기기크기에 따라 사용자 편..
안녕하세요 :) 알씨타운입니다. 오늘은 그래픽을 렌더링 하는 Javascript API Web GL에 대해서 리뷰해보겠습니다. Web GL은 화려한 애니메이션 동작을 보고 3D 툴이라고 생각하실 수 있지만, 좌표를 계산하고 그것을 렌더링 해서 움직이는 것처럼 보이게 만드는 Javascript 기반의 API입니다. (좌표 계산이니까 수학이 필요하겠죠?) WebGL은 위와 같은 장점을 볼 수 있는데, 한마디로 정의하자면, 별도의 플러그인 없이 무료로 javascript로 구축할 수 있는 기술 이라고 생각하시면 될 것 같습니다. WebGL을 구현하기 위해서 위와 같은 기본적인 세팅이 필요합니다. HTML 에 canvas 태그를 삽입하고 script로 canvas 안에 WebGL..
안녕하세요! 알씨타운입니다! :) 오늘은 PWA에 대해서 이야기 해보고자 합니다. (PWA) progresive web app는 모바일에서 사용자 경험을 제공하는 기술로 웹과 앱의 장점을 결합한 기술 입니다. 한마디로 정의하자면, 웹을 앱처럼 동시에 사용가능한 기술! 앱은 아니지만, 앱인 척 위장이 가능하다 위와 같은 PWA는 기능들을 사용이 가능합니다. 생각보다 많은 기능들을 제공함을 알 수 있습니다. 그렇다면 PWA를 사용한다면 개발자와 사용자는 어떻게 느낄까요? 개발자 입장 사용자 입장 PWA를 구현하기 위해서 필요한 부분들에 대해 간단히 알아볼까요? (그래서 뭐를 쓰라는 거죠?) 한 마디로 정의하자면, 제작 중인 사이트에 맞는 것을 사용하는게 좋다는 것입니다. 각각의 장단점을 가..
안녕하세요. 알씨타운입니다. 혹시 넥슨이라는 회사를 아시나요?. 우리나라의 게임 역사에 빠질 수 없는 회사이죠. 이런 넥슨이 2013년 150억을 투자해 만든 아시아 최초의 컴퓨터 박물관을 소개합니다. 현재 제주도에 있습니다. 저는 제주도는 방문이 어려우니, 사이트 분석이라도 하겠습니다. 😭 [넥슨 컴퓨터 박물관 사이트 바로 가기] https://computermuseum.nexon.com/ 접속화면 로딩 화면입니다. 사이트가 아무래도 인터랙티브 웹이라 로딩 속도가 느려질 수 있어서 메인 로딩 화면을 넣었습니다. 도트로 디자인된 캐릭터와 로고는 고전 게임 캐릭터 느낌을 주네요. ❓인터랙티브 웹이란❓ 단순히 만들어진 이미지나 데이터를 보여주는 형태에서 벗어나 실시간으로 데이터를..
안녕하세요. 돌아온 알씨타운입니다. : ) 주말은 잘 보내셨나요? 저는 주말에 영화관을 다녀왔는데요. 사람이 엄청 많더라고요. 팝콘 기다리는 시간만 30분 이상이 소요되었답니다. 이 정도로 다들 영화에 관심을 두고 계신 거겠지요? 영화 하니 기억에 남았던 대한 극장 사이트가 생각나서 이번 분석 사이트는 대한 극장으로 정했습니다. 1958년 개관하여 예술 영화부터 블록버스터까지, 모든 영화를 만날 수 있는 아트플렉스입니다. [대한극장 사이트 바로가기] https://www.daehancinema.co.kr/ 기본 레이아웃 헤더, 메인, 푸터, 내비게이션 바, 내비게이션 메뉴로 나 눠집니다. 헤더 부분은 2뎁스로 하위 메뉴가 나옴으로 조금 더 넓어집니다. 메인화면은 풀스크..