로맨틱크라운_상세페이지

01

Project

로맨틱 크라운 웹사이트 리디자인 및 반응형 사이트 제작

이번 웹 퍼블리싱 공부를 통하여 평소 관심있는 브랜드를 리뉴얼 하면 좋겠다고 생각하였습니다.

기존 사이트는 이미지 위주에 레이아웃이였으며, 텍스트가 작아 가독성이 불편한 단점이 있었습니다.
기존 브랜드가 가지고 있는 세련된 디자인을 가지고 정보전달과 가독성을 높혀 제작하게 되었습니다.

02

Design

Concept

기존에 있던 풀페이지 이미지 위주 레이아웃에서 재 배열, 조합
상품에 대한 정보들과 이미지를 한 눈에 볼 수 있게 제작
그리드 형식과 마우스 오버를 활용한 레이아웃으로 제작
기존 브랜드의 정체성과 맞게 디자인 하였습니다.

Keyword

#세련된

#심플한

#라인

Color

box

Black
#000

box

Light gray
#999

Fonts

Noto Sans KR

Bold

Regulr

Light

Ivypresto-Display

Regulr

Design Problem & Solution

이게 반응형으로 가능한 디자인인가?

디자인을 완성하였으나, 코드 구현 시 반응형으로 제작이 어려운 디자인으로 인하여 반응형으로 만들기 위한 레이아웃으로 재구성

나는 잘 보이는데 다른사람은 잘 보이나?

폰트의 색상, 라인의 색 등 사용자가 인지할 수 없을 정도로 연한 컬러를 사용하여 폰트의 명도와 채도를 올려 접근성에 위배되지 않은 색상으로 제작

PC에서 보면 폰트 엄청 커요

PC에서 최소 읽을 수 있는 폰트 16px 을 바탕으로 디자인 하였지만 직접 퍼블리싱을 하면서 디자인 하였던 폰트가 상당히 컸다는 것을 알게 되었다. 잘 읽힐 수 있는 폰트 크기로 조절 하였으며 PC 폰트에 대한 강약조절을 하였다.

03

Publishing

# 미디어쿼리
# 바닐라 자바스크립트
# 카카오API

Chrome 브라우저 최적화
PC : 1920-1024px / Mobile :390px
Grid를 활용한 레이아웃 정렬
JavaScript를 이용한 모바일 드롭다운메뉴(classList.();)
마우스 오버:hover 시 이미지 몰입감을 위해 CSS transition:scale 효과 적용
카카오 API를 통한 매장 위치정보제공
JavaScript를 이용한 자동 슬라이드 배너 제작
Media Query를 이용한 min-max width 반응형 제작

04

Publishing
Problem & Solution

Grid를 썼는데 row/colums가 적용이 안돼요

Grid 를 적용하였지만 이미지들이 정렬이 안되는 현상 발생. Grid > black_box > img 순 으로 Grid는 하위 선택자 1명 한테만 적용이 되어 이미지들이 모두 틀어짐. class에 직접 row/colums값을 적용하여 이미지를 재배열하여 해결

하란대로 했는데 API 지도 가 왜 안나오지?

Javascript API 를 불러올 때, 지도가 출력되지 않는 현상이 나타남 script src=""에 Http, Https를 작성하지 않아 출력되지 않는 현상 해결 Https: 를 붙이지 않을 시 많은 시간이 소요되며 로컬에선 불러와지지 않는다는 점을 알게됨.

웹폰트 적용은 된거 같은데 왜 출력이 안될까?

폰트 Ivypresto-Display 적용 시 F12 개발자모드를 통하여 적용 확인은 하였지만 Window 기본 폰트만 적용 됨. link 를 통하여 확인 해 본 결과 기존 Font 의 이름과 웹폰트의 이름이 일치하지 않아 일치시켜 해결.

자동 슬라이드 배너 완성

플러그인을 통한 배너가 아닌 순수 자바스크립트를 이용하여 배너 완성. classList와 setInterval을 통한 시간에 따른 변화를 주었고 opacity를 통한 자연스러운 움직임을 부여하였다.

로맨틱 크라운 _ 웹사이트