김종국 옷 티셔츠 사이트 ironstein 쇼핑몰 만들기 #1 [벤치마킹]

최근 연예인 김종국씨가 ironstein 이라는 '브랜드'를 내놓고 쇼핑몰을 만들어 굿즈 판매를 시작해, 인기몰이 되고 있습니다. 화제가 되고 있는 만큼 해당 쇼핑몰을 '아임 웹'으로 벤치마킹 해보도록하겠습니다.

웹 사이트 화면 구성 살펴보기

먼저, 연예인 김종국씨가 만든 쇼핑몰의 구성을 한번 살펴보겠습니다. 상품을 보기 위해서 스크롤을 내리면 좌측 사이드바는 고정상태이면서 상품을 볼 수 있도록 해놓았으며. 품절에 따른 팝업창을 구성해놓았습니다.

 

상단의 메뉴는 고정을 해두어서 페이지 스크롤을 내릴 때, 지속적으로 보이게 끔 해놓았고, '로그인'과 '회원가입'을 영어로 표현하였으며 장바구니 아이콘과 돋보기가 보입니다.

ironstein 이라는 CI(로고)는 우측에 고정을 했으며 섹션을 간단하게 표현을 하였습니다.

 

해당 사이트를 같이 만들어보겠습니다.

 

무료로 사이트 개설하기

아임웹을 가입하시고 '내 사이트' 탭을 눌러 무료사이트를 개설합니다. 개설을 누르게 되면 '템플릿'을 선택할 수 있는데

아무거나 선택하셔도 상관 없습니다만, 각 섹션을 삭제하기가 불편함으로 저는 Our-mind라는 템플릿을 선택하였습니다.

새로운 사이트를 '아이언하츠'라고 그냥 이름을 지어주었습니다. 여러분들께서 원하시는 쇼핑몰 이름이나 '브랜드' 이름을 적어주시면 됩니다.

사이트 구성이 1~2분 사이로 진행이 될텐데요. 사이트가 완성이 되면 도구의 '관리'탭을 들어가 줍니다.

관리자 모드에 접속하기 위해서 한번 더 로그인을 진행해줍니다.

메인 홈페이지 구성을 위한 관리자모드 접속

관리자 모드에 들어오셨다면, 디자인 모드를 클릭하여 편집을 시작해보겠습니다.

디자인 모드에 들어오시면 스킨이 어떻게 구성이 되어있는지 한눈에 보일 겁니다. 아임웹 홈페이지는 '섹션'별로 구간을 나누어서 사용을 하고 있습니다.

 

사이드바 섹션 고정 및 메뉴 표현

 

아임 웹 '디자인 모드'에 들어와서, 필요없는 부분들은 모두 삭제를 해줍니다. 오른쪽 마우스 클릭을 눌러서 '섹션' 삭제를 해주세요.

섹션이 모두 삭제가 되었으면, 중앙의 '플러스' 버튼을 눌러서 섹션을 추가해줍니다. 

가장 먼저, Home 부분에서 핵심이 되는 '상품'을 보여주기 위해서 DB 요소중 하나인 쇼핑 섹션을 만들어주겠습니다.

그리고 섹션 설정을 통해서, 섹션을 2개로 분리하여 '사이드바'를 만들어줄겁니다. (섹션 설정 탭 클릭)

섹션 설정에서 '사이드' 부분에 왼쪽에 사이드바를 볼 수 있는데 사이드바는 스크롤을 내려도 고정이 되게 끔 '섹션 사이드 고정' 체크표시를 눌러서 움직이지 않도록 설정을 해줍니다.

 

섹션이 나뉘어졌으면, 왼쪽 사이드바에는 홈페이지의 '메뉴'들을 추가해줄겁니다. (섹션 추가 - 메뉴 리스트)

고정 사이드 바에 메뉴가 생긴 모습

이렇게 메뉴가 생성된 모습을 볼 수 있을텐데요, 오른쪽 마우스 클릭을 눌러서 메뉴의 디자인을 바꿔보겠습니다.

(메뉴/카테고리 설정 클릭)

메뉴/카테고리 설정을 누르게 되면 '다른 스타일' 버튼 하나가 보일텐데요 해당 버튼을 눌러서, 연예인 김종국씨 브랜드인 아이언스테인 홈페이지의 메뉴/카테고리 디자인과 비슷한 6번째에 있는 스타일을 선택해줍니다.

메인(홈) 상단 이미지 추가

아이언 스테인 메인 쇼핑몰 '홈'페이지에 티셔츠에 관한 문구와 함께 큰 이미지 섹션을 기억하시나요? 그것을 추가하기 위해서 상품 위쪽에 '플러스' 버튼을 눌러서 이미지를 추가해줄겁니다.

상단 이미지를 추가하는 모습

이미지 설정에 들어오시면, 2개의 칸이 보이실텐데요, 기본 이미지에 포인터를 가져다 대시면 아임웹에서 제공하는 '무료 이미지'를 활용해보실 수 있습니다. '의류 쇼핑몰'이다보니 우선 기본이미지로 설정을 하시고, 추후 '업로드 이미지'로 변경하겠습니다.

높이는 먼저 설정을 해주셔도 좋습니다. (사이트의 틀이 어느정도 만들어지고 나면 세부적인 것을 수정할 때 하시는 것을 추천드립니다.)

'상품' 표시 갯수 설정

아이언스테인 홈페이지에는 홈 화면에 '상품의 표시 갯수'와 '표시방식'이 1:1 정사각형 비율, 1줄당 4개의 상품을 전시했습니다. 해당 설정을 맞추기 위해서 이전에 추가했던 DB요소 '쇼핑' 섹션에 우측 마우스 클릭을 눌러 설정을 들어가주겠습니다.

 

설정에 보면 '디자인' 부분이 보이실텐데, 이미지의 비율을 1:1 정사각형으로 설정을 해주시고 1줄의 개수는 4개로 바꿔주세요

얼추 조금 많이 비슷해졌을겁니다. 이제는 맨 위 상단의 '네이게이션 바'를 만들차례입니다.

네이게이션바 / 상단 고정 메뉴 표현

아임 웹 '디자인 모드'에서 우측 상단에 '상단 설정' 탭이 있을텐데 해당 버튼을 눌러줍니다. 그러면 상단 섹션만 따로 구성할 수 있는 화면으로 넘어가게 됩니다.

상단 메뉴에서 >> NEW로 시작되는 불필요한 텍스트를 다 없애주겠습니다. (삭제)

아이언스테인 홈페이지의 경우 상단 네비게이션 바의 목록순서가 로그인-레지스터(회원가입)-장바구니(아이콘)-검색(아이콘) 순서였습니다. 우측 마우스클릭으로 '로그인/장바구니 설정'에 진입합니다.

우선, Join이라는 부분이 (회원가입) 버튼인데, 해당 체크 표시를 눌러서 '문구' 부분을 'Register'로 써줍니다. (한글이나 기타 표현하고 싶은 문구가 있으면 그것으로 기입해도 됩니다.)

 

장비구니 같은 경우 'cart'로 표시가 되어있거나 한국어로 '장바구니'로 표현이 되어있을텐데, 문구를 삭제하시고 아이콘으로 눌러서 간단하게 표현해보겠습니다. (아이콘 버튼 클릭)

아임웹에서는 다양한 아이콘을 무료로 제공합니다. '추천 아이콘'에서 벤치마킹한 아이콘과 유사한 장바구니 모양을 선택해줍니다.

 

그리고 상품을 검색하기 위한 아이콘을 추가하기 위해서, 고정 섹션의 경계부분 위쪽으로 포인터를 가져다 대시면 플러스모양이 등장합니다. 홈 화면과 동일하게 '요소'를 추가할 수 있습니다.

디자인 요소의 '검색'을 추가해줍니다.

벤치마킹 쇼핑몰과 굉장히 흡사해졌습니다. (요소 간격 여백은 추후에 설정하셔도 됩니다.)

아래 인스타그램 아이콘 추가하기

아이언스테인 에서는 이렇게 '인스타그램' 아이콘이 있습니다. 아임웹 홈페이지에서 '사이드 고정 섹션' 부분의 경계선에 '요소'를 하나 더 추가해보겠습니다. ('아이콘' 을 추가하시면 됩니다.)

마찬가지로, 아이콘 설정에서 맨 아래에 '소셜/브랜드'라는 항목에서 '인스타그램' 아이콘을 선택해줍니다.

아이콘 모양을 설정하시고, 추가적으로 클릭을 하면 넘어갈 수 있는 인스타그램 URL 링크를 복사해서 붙여넣으면 됩니다.

(정렬 부분은 '가운데'가 아닌 왼쪽으로 해주시면 됩니다.)

메뉴의 형태가 많이 비슷해지셨을 겁니다.

메뉴 및 카테고리 정리

이제는 ALL PRODUCT라고 보여지는 메뉴들을 포함하여 '기존' 메뉴의 이름을 바꿔보겠습니다. 아이언스테인에서는

1. Home
2. Products
3. NEW
4. TOPS

등등으로 구성이 되어있는데, 일단 '무료 사이트'에서는 메뉴를 추가할 수 있는 갯수제한이 있습니다. (4개 이상은 유료버전) 4개의 메뉴를 만들어보겠습니다.

디자인 모드의 좌측 맨 위의 3줄 아이콘을 클릭하시면, 메뉴를 구성할 수 있는 탭이 등장합니다. '상단 메뉴' 분에서 수정할 메뉴를 우측마우스 클릭을 눌러서 '메뉴 설정'에 진입합니다.

메뉴의 이름을 벤치마킹할 사이트와 동일하게 첫번째는 'Home'으로 수정해주시고, '상단 메뉴' 탭 옆에있는 +버튼을 눌러서 메뉴를 추가해줍니다. 다른 메뉴들을 추가해줍니다.

 

추가한 메뉴 중에서 'Products'라는 메뉴는 상위메뉴가 되고, NEW 메뉴와 TOPS 메뉴는 하위메뉴가 됩니다.

하위로 보낼 메뉴를 드래그 앤 드롭을 해서 상위 메뉴가 될 부분에 끌어다 놓으면 됩니다.

 

메인 페이지에서 '메뉴가 안보여요!' 어떻게 해야하죠?

메뉴가 안보이는 이유는 상위메뉴가 하위메뉴를 덮고 있기 때문에 그렇습니다. 

메뉴가 보이는 섹션화면에서 '메뉴/카테고리 설정'에 진입하여 '하위메뉴 모두 펼치기'라는 기능을 활성화 시키면 됩니다.

 

어떠신가요 정말 많이 비슷해졌죠? (메뉴를 늘리기 위해서는 스타터 이상 '유료버전' 요금제를 사용하시면 됩니다.)

---

 

로고 추가하기

쇼핑몰 웹 사이트의 좌측 끝 상단에는 CI(브랜드 로고)가 보이는데요, 이것 역시 추가해보도록 하겠습니다.

※로고의 경우 이미지를 따로 이미지를 준비해주셔야합니다. (PNG 투명 배경 로고)

최적화 사이즈 : 가로 200x 세로 50 px

'상단 설정' 모드에 진입하신 후 좌측 경계선에 마우스를 가져다대면 '요소'를 추가할 수 있습니다.

디자인 요소에서 '로고'를 선택해주시면 '사이트명'으로 된 글자로고가 먼저 나오게 되는데 신경쓰지마시고 우측마우스 클릭 '로고 설정'에 진입합니다.

로고 설정에서, '비워두면 사이트명'이라는 타이틀 명이 있는데 '사용하기' 체크 버튼을 해체 해주시고, '로고이미지'버튼을 선택하여 이미지를 선택합니다.

저는 간단하게 로고 이미지를 한번 만들어보았습니다. 미리 준비해둔 로고 이미지를 선택하시면

이렇게 완성이 된 것을 볼 수 있습니다.

상단 메뉴의 마무리가 필요합니다. 벤치마킹을 한 사이트는 로고와 로그인 아이콘들이 사이트의 양 끝에 붙어있는데, 현재 우리가 만든 사이트는 그렇지않습니다. 이때 사용하셔야하는 기능은 가로 100% 확장기능을 사용하시면 됩니다.

상단 설정에서 우측 마우스 클릭을 하시고 섹션 설정에 들어가 '가로 100% 확장'에 체크 표시를 활성화 시켜주시면 양옆에 붙어있는 요소들을 확인할 수 있습니다.

 

자! 이렇게 해서 모든 사이트의 '뼈대'는 전부 만들은 셈입니다.

어떠신가요? 굉장히 비슷하게 만들었습니다.

---

팝업 추가하기

 

---

완성된 데모 홈페이지

 

 

다들 고생하셨습니다! 쇼핑몰에 들어가는 이미지와 상품 이미지를 바꾼다면, 연예인 김종국 쇼핑몰과 비슷하게 만드실 수 있습니다.