알씨타운

​ ​ 안녕하세요 :) 알씨타운입니다~~ 오늘은 hover와 연혁 디자인이 돋보이는 '카노' 모바일 웹 리뷰 시작해보겠습니다. ​ https://www.e-kano.com/kr/ ​ ​ header ​ 먼저 header를 비교해보면 최상단에 있으면 배경이 transparent(투명)였다가 scroll-down 하게 되면 배경색이 #ffffff(흰색)로 변경되고, ​ header에 hover 하게 되면 전체 소메뉴가 노출되면서 배경이미지가 노출됩니다. 전체 노출되면 흰색 여백이 자칫 심심할 수 있는데, 배경이미지를 삽입함으로써 여백을 잘 커버했다고 생각이 듭니다. ​ 햄버거 메뉴 ​ 햄버거 메뉴 버튼을 클릭하게 되면 풀페이지로 구성되어 노출됩니다. 대메뉴 hover 했을 때 대메뉴가 강조색으로 변경되고 오..

​ 안녕하세요 소프트랩스입니다 오늘의 웹사이트 리뷰를 해보겠습니다ㅎㅎㅎ 오늘 저희가 알아볼 사이트는 웹모아입니다. 깔끔한 레이아웃과 화려한 인터랙션으로 회사 소개가 돋보이는 웹디자인입니다. 한번 살펴보시죠! ​ https://www.webmoa.co.kr/ 전체 뷰 ​ 처음 접속 시에 메인페이지에 화려한 인트로가 돋보이는데요 로고를 확대하면서 안으로 포커싱하여 들어가는 인터랙션이 멋집니다^^ ​ ​ 메뉴 구성은 다음과 같습니다. about : 회사소개 work : 프로젝트 리스트 news : 회사 내의 새 소식 contact : 프로젝트 의뢰서 ​ 이렇게 4가지 구성으로 군더더기 없는 메뉴 시안을 보여주고 있습니다. ​ About 페이지 구성 모든 페이지에 간단한 인터랙션이 들어가 있습니다. 회사 소개와..

​ ​ ​ 안녕하세요:) 알씨타운입니다. 오늘은 관공서 사이트를 가져와봤는데요! 다양한 형태의 애니메이션이 돋보이는 페이지라 한번 리뷰해보려 합니다! ​ https://www.yuseong.go.kr/tour/ ​ ​ 반응형 ​ 다양한 사이즈에서 반응형이 작동하는 것으로 보아 width값에 따라 깨짐 없이 표현하려고 했던 것으로 보입니다. 반응형 사이즈가 많으면 디테일이 살아나지만, 그만큼 관리하기 어려워지는 단점이 있죠. ​ 대메뉴 ​ 대메뉴를 hover 했을 때, 3depth의 구성을 볼 수 있는데, depth가 바로 아래로 나열되는 형식이 아니라 목록처럼 구성하여, 시각적으로 각 메뉴의 정보를 한눈에 볼 수 있도록 제작했다는 점이 돋보입니다. ​ ​ ​ 햄버거 메뉴 ​ ​ 햄버거 버튼은 pc와 mo..

​ ​ 안녕하세요 알씨타운입니다! :) 엔씨소프트(NC)가 최근에 공식 브랜드 미디어 'NC PLAY'를 오픈했습니다. 그 동안 'NC 공식 블로그'였던 곳을 리뉴얼해 PC,MOBILE 반응형 웹페이지를 구성해서 웹분석을 해보고자 합니다~ ​ ​ ​ https://about.ncsoft.com/play 메인페이지 ​ ​ 메인 최상단에는 동영상이 삽입되어 있습니다. 동영상이 반응형에 따라 크기가 변화되는데 부모 태그를 밖에 감싸고 object-fit : cover를 사용해서 크기가 줄어들거나 크기가 커지면 그 크기에 맞게 cover됨을 알 수 있습니다. ​ ​ ​ ​ scroll 이벤트가 되면 바로 아래로 내려가지 않고 동영상의 크기가 점차 줄어들고, 동영상 뒤 이미지 나타나면서 동영상을 감싸고 있던 배경..

안녕하세요 :) 알씨타운입니다. ​ 요즘 아이들도 코딩을 배우고 있다는 사실 알고 계신가요? 아이들이 사고하고 표현할 수 있도록 (옛날의 과학상자 같은) 모터, led 등으로 프로그래밍 언어를 배울 수 있도록 도와주는 장난감을 파는 사이트가 있어 가지고 왔습니다. (웹 반응형 페이지로 되어있어 더욱 기대가 됩니다.) ​ 어떻게 구성했는지 분석해보겠습니다! ​ 메인페이지 메인페이지 pc버전을 먼저 둘러보자면, width 값이 1280px이 되면 햄버거메뉴가 나타나면서 대메뉴들과 쇼핑몰 링크 버튼이 사라지는 것을 알 수 있습니다. ​ ​ mobile에서 768px과 767px사이에 반응형 미처리된 아쉬운 부분을 볼 수 있었지만, 대체적으로는 반응형 처리가 잘 되어있는 모습을 볼 수 있었습니다. header ..

​ 안녕하세요 :) 알씨타운입니다. 사진관에서 사진을 찍으면 원하는 대로 못 찍는 경우나, 몸이 굳어서 부자연스러운 자세로 찍는 경우가 허다하실 겁니다. 그래서인지 셀프 사진을 찍는 사람들이 부쩍 증가하고 있습니다. ​ 오늘 준비한 리뷰는 셀프 사진관인 '사진온실'입니다. 페이지 전환 화면은 꽉 채운 풀페이지로 구성되어있으며, 페이지 스크롤 시 이벤트가 적용되어있어 절반을 나누어 왼쪽은 아래로 fade out 되고 오른쪽은 위로 fade out되어서 독특한 애니메이션 구조를 가지고 있습니다. 약간의 딜레이가 있어 불편한 감이 있지만, 참신한 페이지 구성으로 보입니다. ​ ​ 스크롤을 넘기면 페이지 내에 contents들이 나타나는 효과가 있습니다. 자연스럽게 스크롤을 넘길 때마다 fade up 되어서 나..

​ 안녕하세요 소프트랩스입니다~!! 오늘의 모바일웹 리뷰를 시작하겠습니다!!ㅎㅎㅎ 오늘 저희가 알아볼 사이트는 화해인데요~!! 눈에 잘 담기는 심플한 디자인과 예쁜 색감이 눈에 띄는 예쁜 사이트입니다~! 많이들 앱은 잘 아시는 데 웹은 잘 모르시더라구요 ㅋㅋ 같이 알아보시죠!! ​ ​ https://www.hwahae.co.kr/ 내가 찾는 모든 뷰티 | 화해 대한민국 1등 뷰티앱 화해. www.hwahae.co.kr ​ ​ ​ 일단 레이아웃은 굉장히 깔끔하고 볼 게 많다고 할까요? 재밌는 애니메이션 효과를 많이 넣었군요!! 그러면서 화장품 회사라는 느낌도 분명하게 전달하면서 컨셉을 확실히 잡은 것 같습니다. 일단 메인 화면부터 보시면 밝은 민트색 컬러에 아름다운 모델분들이 화장품 시연을 하는 동영상이 ..

​ 안녕하세요 :) 알씨타운입니다. 10년 전만 해도 유튜버라는 직업은 생소했는데 유튜브 크리에이터라는 직업은 이제 너무 유명하고 많은 초등학생이 꿈꾸는 직업 중의 하나가 되었습니다. ​ ​ 크리에이터 소속사 샌드박스의 웹 모바일 리뷰를 해보려고 합니다. ​ ​ ​ https://sandbox.co.kr/ 크리에이터들과 함께 세상을 즐겁게 만들어 나가는 MCN 업계 대표 디지털 엔터테인먼트 기업 sandbox.co.kr ​ ​ 메인페이지 pc 화면에서 볼 때, 스크롤 이벤트가 많은데, ​ 맨 처음 보이는 슬라이드 이미지가 스크롤 되어 가려지게 되면 이미지는 오른쪽으로 밀려들어가고, 타이틀 글자가 사라지는 효과를 주었습니다. ​ 오른쪽의 클릭 버튼은 자바스크립트로 동적인 요소를 더욱 풍부하게 표현할 수 있..