알씨타운

​ ​ 안녕하세요~ 소프트랩스입니다. ​ 오늘은 모바일 앱 11번가를 분석해 보겠습니다. 최근에 유튜버 미디어디자이너님께서 모바일 UI UX에 대한 10가지 원칙을 아주 잘 요약해 주셔서 그를 바탕으로 11번가 앱을 분석해 보겠습니다. ​ 모바일 레이아웃을 디자인하거나 벤치마킹 할 때는 분석이 가장 중요하죠~! 10가지 모바일 원칙과 함께 알아보겠습니다!!! ​ ​ ​ ​ ​ ​ ​ 첫 번째. 폰트 크기 모바일 앱에서 폰트 사이즈는 상당히 중요한데요. 너무 크거나 작으면 웹앱의 가독성이 심하게 떨어진다고 합니다. 그래서 원칙 같은 것을 적어두는데 1rem 기본으로 12px로 맞추고 그보다 작지 않게 디자인하는 것이 중요합니다. 그리고 최대 크기는 그 두 배수인 24px을 넘기지 않는 것이 가장 좋다고 합..

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

​ ​ ​ 안녕하세요:) 알씨타운입니다. 오늘은 관공서 사이트를 가져와봤는데요! 다양한 형태의 애니메이션이 돋보이는 페이지라 한번 리뷰해보려 합니다! ​ 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 화면에서 볼 때, 스크롤 이벤트가 많은데, ​ 맨 처음 보이는 슬라이드 이미지가 스크롤 되어 가려지게 되면 이미지는 오른쪽으로 밀려들어가고, 타이틀 글자가 사라지는 효과를 주었습니다. ​ 오른쪽의 클릭 버튼은 자바스크립트로 동적인 요소를 더욱 풍부하게 표현할 수 있..