알씨타운

  안녕하세요 소프트랩스입니다 오늘의 웹사이트 리뷰를 해보겠습니다ㅎㅎㅎ 오늘 저희가 알아볼 사이트는 웹모아입니다. 깔끔한 레이아웃과 화려한 인터랙션으로 회사 소개가 돋보이는 웹디자인입니다. 한번 살펴보시죠!     ​ <웹사이트 바로가기>   https://www.webmoa.co.kr/   전체 뷰 ​ 처음 접속 시에 메인페이지에 화려한 인트로가 돋보이는데요 로고를 확대하면서 안으로 포커싱하여 들어가는 인터랙션이 멋집니다^^ ​ ​ 메뉴 구성은 다음과 같습니다. about : 회사소개 work : 프로젝트 리스트 news : 회사 내의 새 소식 contact : 프로젝트 의뢰서 ​ 이렇게 4가지 구성으로 군더더기 없는 메뉴 시안을 보여주고 있습니다. ​ About 페이지 구성 모든 페이지에 간단한 인터랙션이 들어가 있습니다. 회사 소개와 클라이언트에 대한 대략적인 내용을 볼 수가 있습니다.   ​ ​ Work 페이지 가장 중요한 포트폴리오 페이지를 보시면 큼직한 레이아웃 구성과 SVG 이미지를 활용한 호버 효과를 볼수 있습니다. 스크롤을 살짝 내리면 배경이 블랙으로 변경되면서 고급스러운 느낌을 주는 효과도 있어요 각 콘텐츠를 클릭하면 해당 사이트로 이동하게 됩니다. 조금 아쉬운 점은 웹사이트 주소가 달라진 케이스가 있을 수 있기 때문에 도메인이 없어졌거나 페이지가 없는 사이트는 사이트 설명을 해주는 단계 혹은 페이지가 있었다면 좋았을 것 같다는 생각입니다. ​ NEWS news는 아직 최근 만들어진 사이트다 보니 별다른 뉴스가 없었습니다. 최근 수주된 프로젝트를 알리는 게시판으로 활용되는 것 같았습니다. 리스트만 있고 내용은 없는 구성이라서 약간 아쉬웠는데요 레이아웃 자체는 깔끔한 구성 같습니다. ​ ​ 마지막으로 contact 페이지입니다. 하단으로 내릴수록 블랙 화면으로 스무스하게 전환되는 인터랙션이 멋집니다 ​ ​ 1. 프로젝트를 의뢰할 수 있는 정보칸 회사명/ 담당자/ 연락처/ 직책/ 이메...

  안녕하세요:) 알씨타운입니다. 오늘은 관공서 사이트를 가져와봤는데요! 다양한 형태의 애니메이션이 돋보이는 페이지라 한번 리뷰해보려 합니다! ​ https://www.yuseong.go.kr/tour/       ​ ​ 반응형 ​ 다양한 사이즈에서 반응형이 작동하는 것으로 보아 width값에 따라 깨짐 없이 표현하려고 했던 것으로 보입니다. 반응형 사이즈가 많으면 디테일이 살아나지만, 그만큼 관리하기 어려워지는 단점이 있죠. ​ 대메뉴 ​ 대메뉴를 hover 했을 때, 3depth의 구성을 볼 수 있는데, depth가 바로 아래로 나열되는 형식이 아니라 목록처럼 구성하여, 시각적으로 각 메뉴의 정보를 한눈에 볼 수 있도록 제작했다는 점이 돋보입니다. ​ ​ ​ 햄버거 메뉴 ​ ​ 햄버거 버튼은 pc와 mobile상에서 둘 다 노출이 되지만, 노출되는 방식이 서로 다릅니다. pc 사이즈에서는 햄버거 버튼을 눌렀을 때, 사이트 맵 페이지로 넘어가고 mobile 사이즈에서는 햄버거 버튼을 눌렀을 때, 사이드 메뉴가 노출되면서 depth 3까지 보일 수 있도록 되어있습니다. 개인적으로는 사이드메뉴 디자인의 통일이 아쉽다는 생각이 듭니다. ​ ​ slide-active ​ auto-play로 되어있지 않지만, 페이지를 넘기면 지도에 강조(위치표시)가 변경되는 형태의 방식을 취하고 있습니다. 애니메이션 ​ ​ 홈페이지에서 눈에 띄었던 것들 중 하나가 애니메이션 효과인데, 자칫 딱딱하기 쉬운 관공서 사이트에서 이런 포인트를 삽입해서 완화하려는 노력이 보였습니다. ​ scroll-event를 이용한 애니메이션인데, 그 위치에 도달하면, 구멍 도형에서 사람과 말풍선이 위로 올라오는 애니메이션이 삽입되어있습니다. ​ 그 하단에도 ​ 빌딩의 반짝이는 효과를 주기 위해 같은 위치에 번갈아가면서 이미지가 나오게 하는 애니메이션 효과 ​ 사람이 뛰는 모습을 표현하기 위해서 그림자는 밑에 고정시키고 사람만 위아래로 움직일 수 있도록 하는 애니메이션 효...

  안녕하세요 알씨타운입니다! :) 엔씨소프트(NC)가 최근에 공식 브랜드 미디어 'NC PLAY'를 오픈했습니다. 그 동안 'NC 공식 블로그'였던 곳을 리뉴얼해 PC,MOBILE 반응형 웹페이지를 구성해서 웹분석을 해보고자 합니다~ ​ ​​ https://about.ncsoft.com/play   메인페이지 ​ ​ 메인 최상단에는 동영상이 삽입되어 있습니다. 동영상이 반응형에 따라 크기가 변화되는데 부모 태그를 밖에 감싸고 object-fit : cover를 사용해서 크기가 줄어들거나 크기가 커지면 그 크기에 맞게 cover됨을 알 수 있습니다. ​ ​ ​ ​ scroll 이벤트가 되면 바로 아래로 내려가지 않고 동영상의 크기가 점차 줄어들고, 동영상 뒤 이미지 나타나면서 동영상을 감싸고 있던 배경의 opacity가 약해져서 뒤 이미지가 점차 뚜렷해지는 것을 볼 수 있습니다. ​ ▼ gif img를 보면 더 명확하게 확인이 가능합니다. ▼ ​ ​ ​ 검색 ​ ​ placeholder 폰트 크기가 조금 아쉽다라는 생각이 들었습니다. 검색창 배경색은 위에서 아래로 투명해지는 #fff  색상의 배경입니다. ​ 검색을 하게되면 검색결과를 Tab 형식으로 내용을 분류하여 검색결과를 확인 할 수 있도록 하였습니다. ​ ​ ​ 햄버거 메뉴 ​ ​ 햄버거 메뉴도 검색창처럼 같은 형식으로 나타나고 각 메뉴에 hover 시 왼쪽에서 오른쪽으로 밑줄이 노출됩니다. 메뉴의 font-weight에 따라 밑줄의 두께도 다르게 하여 디자인 디테일이 돋보였습니다. ​ ​ ​ 메인페이지 - slide ​ ​ 각 반응형 max-width 값에 따라 slide 크기와 노출 개수가 변환되고 있습니다. ​ ​ 가장 크게 노출되는 점은 pc버전에서는 slide button으로 오른쪽 / 왼쪽으로 이동할 수 있는 button이 노출되고 mobile 버전에서는 상단에 있던 button이 사라지고 하단에 scrollbar가 생겨서 터치 슬라이드가 가능하도록 되어있습니다. ...