달력

062018  이전 다음

  •  
  •  
  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

'쇼핑몰제작 정보'에 해당되는 글 50건

  1. 2009.07.14 무료 독립형 쇼핑몰솔루션, 아이몰(iMall)3.0
  2. 2009.06.16 [SEO기초] 검색엔진 최적화를 통한 상위등록에 대한 오해
  3. 2009.06.16 [SEO기초] 한국적인 검색엔진 최적화 전략
  4. 2009.06.15 [SEO기초] 검색엔진 최적화를 위한 쇼핑몰제작
  5. 2009.06.12 [SEO기초] 인터넷쇼핑몰 검색엔진 최적화를 위한 기획
  6. 2009.04.10 후이즈, 쇼핑몰 솔루션 업그레이드 오픈
  7. 2009.01.20 [추천서적]'성공 쇼핑몰 창업 & 운영' - 강윤령, 최재용 공저
  8. 2009.01.09 쇼핑몰 홈페이지의 구성 요소 제작
  9. 2009.01.08 쇼핑몰기획과 상품페이지 제작 노하우
  10. 2008.12.03 엑스퍼넷, 이미지로 상품 검색 서비스
  11. 2008.11.27 [SEO기초] 검색엔진 검색순위의 기본 원리
  12. 2008.11.27 완벽한 동영상 변환기 'show Ver 1.9a'
  13. 2008.11.21 카페24 빌더, 비즈니스 특성 따라 홈페이지 변신
  14. 2008.11.04 이비즈로, 쇼핑몰 홈페이지 자동구축 솔루션
  15. 2008.11.04 아이네임즈, 쇼핑몰 무한생성 솔루션
  16. 2008.10.07 고객과 친근한 로고가 바로 컨셉이다.
  17. 2008.09.25 쇼핑몰 상품페이지의 아름다운 구속
  18. 2008.09.12 [쇼핑몰제작] 홈페이지 디자인의 10계명
  19. 2008.09.10 인터넷쇼핑몰, 이렇게 디자인 하자.
  20. 2008.07.22 [쇼핑몰제작] 영원히 잊지못할 홈페이지 만드는 7가지 방법
  21. 2008.07.15 [쇼핑몰솔루션] 카페24 경쟁력은 ‘기술’과 ‘서비스’-이재석대표
  22. 2008.06.10 [쇼핑몰제작] 쇼핑몰, 잊지못할 첫 인상이 중요
  23. 2008.06.09 [쇼핑몰제작] 쇼핑몰에 컨셉을 입혀라!
  24. 2008.05.28 [홈페이지제작] 웹사이트 유저빌리티 체크 11가지
  25. 2008.05.26 [홈페이지제작] 아이템을 한 라인에 표시하는 방법 <li 태그>
  26. 2008.05.26 [홈페이지제작] HTML 태그 기초8- IMG 태그
  27. 2008.05.21 [홈페이지제작] HTML 태그 기초7-HR 태그 (1)
  28. 2008.05.21 [홈페이지제작] 이미지와 관련하여 로딩 속도를 올리는 방법
  29. 2008.05.20 [홈페이지제작] HTML 태그 기초6- 링크 요소
  30. 2008.05.19 [홈페이지제작] HTML 태그 기초5-2- 표(TABLE) 요소


무료 독립형 쇼핑몰솔루션, 아이몰(iMall)3.0


아이몰3.0은 무료로 제공되는 설치형 쇼핑몰솔루션입니다.
아이네임즈 http://www.inames.co.kr


아이네임즈가 쇼핑몰 창업자들을 위해 이미지호스팅과 무료쇼핑몰인 iMall 3.0서비스를 오픈했다.
이미지호스팅은 오픈마켓에서 쇼핑몰을 운영하는 고객들에게 별도의 서버를 제공하여 트래픽 분산을 방지하고 안정적으로 사이트를 운영할 수 있도록 돕는 이미지링크전용 호스팅 서비스이다.

해당 이미지를 업로드 한 후 운영중인 사이트에 이미지의 경로(URL)를 삽입하기만 하면 되므로 트래픽, 하드용량에 대한 비용부담을 덜 수 있다. 

 iMall 3.0은 프로그램과 DB를 각 상점들이 공유하여 사용하는 여타 쇼핑몰 서비스와는 달리 몰마다 프로그램과 DB가 별도로 설치되어 있기 때문에 처리속도 향상은 물론 보안과 수정이 용이하다.

또한 템플릿기능을 이용하면 쇼핑몰을 원하는 대로 디자인 할 수 있는 등 확장성이 뛰어나 대규모 종합쇼핑몰부터 소형 전문 쇼핑몰까지 운영이 가능하다.




- 온라인 신청서 작성만으로 다양한 기능의 쇼핑몰을 구축하실 수 있습니다.

- 고객님의 컴퓨터에 별도의 프로그램 설치나 복잡한 처리과정이 없이 인터넷이 연결되어 있는 PC만 있으면, 신청과 동시에 바로 시스템이 구축되어 별다른 작업없이 상품 등록만으로도 쇼핑몰 오픈이 가능합니다.

- 모든 기능을 사용해 볼 수 있습니다.

- 로그분석, 매출분석 등 일반적인 쇼핑몰 운영에서 마케팅 관련 다양한 기능까지 인터넷상에서 모두 처리할 수 있습니다.  

- 각 부분에서 운영자의 편의성을 최대로 고려한 탁월한 기능과 가격비교 사이트 등록기능,자유로운 디자인을 가능하게 하는 템플릿관리 등, 확장성이 뛰어나 대규모 종합쇼핑몰부터 소형 전문 쇼핑몰까지 어떠한 쇼핑몰 운영에도 손색 없는 강력한 쇼핑몰 솔루션입니다.

- 프로그램과 DB를 각 상점들이 공유하여 사용하는 타 쇼핑몰 서비스와는 다르게 몰마다 프로그램과 DB가 별도로 설치되기 때문에 처리속도 향상은 물론 보안과 수정이 용이합니다.

- KCP,DACOM,올엣등의 다양한 지불시스템이 기본 탑재되어 있어 해당 서비스업체와의 기본적인 계약절차만으로 신용카드 결제서비스를 이용할 수 있습니다.

- 기존의 서비스가 솔루션 제공업체와 쇼핑몰 운영자간의 1:1 서비스가 전부였다면,iMall 3.0 서비스는 회원제로 운영되어 저희 iMall 3.0와 회원간의 1:1서비스는 물론 회원간의 Community 서비스를 통하여 홍보나 마케팅, 제반 쇼핑몰운영 노하우 등을 공유함으로써 수익을 극대화시킬 수 있습니다.

- 강력한 템플릿기능을 이용하여 쇼핑몰의 거의 전부분을 원하는대로 디자인 할 수 있으며,초보자를 위한 템플릿마법사 기능을 활용하여 원클릭으로 쇼핑몰 디자인을 수정할 수 있습니다.

- 쇼핑몰에 등록할 수 있는 상품수에 따라 6가지의 패키지로 나누어져 있으므로 운영하실 쇼핑몰의 규모에 적합한 패키지를 선택하므로써 비용의 낭비없이 합리적인 서비스를 받을 수 있습니다.

(아직 Beta 단계이므로 문제점이나 추가사항들은 계속해서 업데이트가 이루어 집니다.)


※ 국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com

Posted by 나우앤


검색엔진 최적화에 대한 오해와 편견

http://www.seoworkshop.co.kr
 
검색엔진에 잘 나오도록 컨텐츠를 만드는 검색엔진 최적화(SEO)에 관심이 갈 수록 높아지고 있다. 하지만 여전히 검색엔진 최적화를 통한 상위등록에 대한 오해과 편견이 적지 않다. 대표적인 상황을 8가지만 살펴보자.


1. "검색 광고하면 충분하지 않나?"

물론 검색 광고(키워드 광고) 나름대로 장점이 있다. 하지만 검색엔진을 이용한 마케팅의 한 부분일 뿐이다. 사람들은 광고보다 일반 검색 결과를 더 많이 본다. 또한 일반 검색 결과는 돈을 낼 필요도 없다. 그외에도 검색엔진 최적화의 장점은 많다. 검색 광고에 만족하는 사람은 검색엔진의 힘을 일부만 활용하는 사람이다.

2. "웹디자인 업체가 알아서 해줄 거야"

사람이 좋아하는 사이트와 검색엔진이 좋아하는 사이트는 다르다. 의뢰한 업체가 별도로 전문적인 최적화 작업을 하는지 반드시 확인해야 한다. 적절한 키워드와 텍스트 사용,  동적인 페이지, 프레임, 테이블 처리, 사이트맵의 활용 등 신경써야 할 부분이 많다. 일반적인 웹디자인과는 다른 영역이다.

3. "이미 메인 페이지를 검색엔진에 맞게 만들어 놓았다구."

메인 페이지(첫번째 페이지)가 최적화되었다고 만족할 일이 아니다.  웹사이트의 모든 페이지 각각이 훌륭한 역할을 수행할 수 있는데 왜 한 페이지에 만족하는가?

4. "메타 태그(Meta Tag)가 중요하대. 이미 넣어 놨어."

메타 태그는 더 이상 도깨비 방망이가 아니다. 영향력이 계속 감소하고 있다. 물론 메타 태그 사용해서 손해볼 것은 없다. 몇 가지 도움을 준다. 하지만 그 이상의 전략이 필요하다. 검색엔진 최적화를 통한 상위등록 전략은 무궁무진하다.

5. "검색엔진에 이미 등록해 놨다니까"

중요한 것은 단순한 등록이 아니라 상위 등록이다. 관련 키워드로 검색해도 먼저 나오지 않는다면 의미가 별로 없다. 사용자들은 첫번째 페이지에만 관심이 있다. 전략을 다시 짜서 상위로 올라가도록 수정해야 한다.

6. "검색엔진 최적화? 상위등록? 그거 불법 조작 아닌가?"

신문 기사에 나오도록 기자들에게 보도자료를 보내는 것은 불법이 아니다. 정당한 마케팅이다. 하지만 기자를 속이거나 기자와 결탁한다면 문제가 된다. 검색엔진 최적화도 마찬가지다. 자신이 만든 컨텐츠를 검색엔진이 좋아하는 형태로 표현하는 것이다.  하지만 단순히 태그(Tag)만 다루는 테크닉이 아니다. 사용자들의 마음을 예측하고 검색엔진을 고려하는 종합적인 마케팅이다. 물론 단순히 사람만 끌어모으려는 낚시질이나 편법을 구사한다면 잠깐 반짝할 수도 있다. 하지만 결국 사용자와 검색엔진에게 외면을 당하게 된다.

7. "열흘이면 되지? 빨리 해줘."

물론 빠른 등록 심사(유료)를 이용하면 디렉토리 검색 등록은 몇 일내에 끝난다. 히자만 전략 수립, 홈페이지 최적화, 웹페이지 검색 등록, 효과 분석과 관리에 걸리는 시간 등을 모두 합치면 적지 않은 시간이 필요하다. 시간과 노력을 들일 수록 효과가 높아진다. 또한 한번 순위가 올라가면 상당기간 효과를 볼 수 있다.. 조급하지 말자.

8. "나중에 하자. 일단 웹사이트 다 만든 후에"

홈페이지를 나중에 바꿀려면 더 힘들다. 검색엔진 최적화는 웹사이트의 모든 페이지와 관련이 있기 때문이다. 웹사이트 제작 전부터 함께 준비하고 진행하는 것이 가장 좋다. 
 


※ 국내1위 인터넷쇼핑몰 창업교육 아카데미 나우앤 http://nowand.com

Posted by 문땡글이

한국적인 검색엔진 최적화 전략 6

국내 포탈사이트들의 검색결과에는 다양한 카테고리가 존재한다. 사이트, 웹페이지는 기본일 뿐이며 지식IN, 블로그, 카페, 뉴스, 동영상, 이미지 등 활용할 수 있는 채널은 넓고도 많다. 키워드를 어떻게 최적화하느냐는 말처럼 쉽지는 않지만 꾸준한 실험으로 철저한 공략이 절실하다.


* 세부 키워드를 공략한다.
* 채널을 입체적으로 활용한다.
* 홈페이지는 언제나 베이스 캠프다.
* (스토리텔링) 블로그를 병행한다.
* 지식검색과 FAQ를 연계한다.
* 컨텐츠를 퍼가고 연결하기 쉽게 만든다.

국내 포탈들이 점점 개방되는 추세다.

1. 검색엔진은 미디어이기 때문이다.
2. 검색광고만으로는 한계가 있기 때문이다.
3. 검색광고 순위에도 영향을 주기 때문이다.
4. 롱테일로 공략할 수 있기 때문이다.
5. 마케팅이 스토리텔링으로 바뀌고 있기 때문이다.

6. 홈페이지만 가지고 자연스러운 마케팅이 가능하기 때문이다.
7. 적은 비용 높은 효과
8. 효과가 오래 지속되가 때문이다.
9. 입체적인 마케팅이 가능하기 때문이다.
10. 해외진출도 손쉽기 때문이다.


키워드 10계명

1. 키워드를 고객으로 본다.
2. 모든 기획은 키워드부터 시작된다.
3. 키워드로 집을 짓는다.
4. 검색은 가도 키워드는 남는다.
5. 고객은 키워드를 찾는다.

6. 좁은 길을 간다.
7. 세상은 넓고 키워드는 많다.
8. 필 feel이 아니라 데이타 data로 승부한다.
9. 키워드를 모든 관리의 키 key로 삼는다.
10. 키워드는 태어나고 크고 분화하고 죽는다.


※ 국내1위 인터넷쇼핑몰 창업교육 아카데미 나우앤 http://nowand.com

Posted by 나우앤


검색엔진 최적화를 위한 쇼핑몰제작 준비사항


1.쇼핑몰 홈페이지 제작/리모델링 준비하기
2.쇼핑몰 디자이너를 위한 최적화 하기
3.검색엔진 최적화를 위한 플래시 만들기


쇼핑몰 홈페이지 제작/리모델링 준비하기

1. 검색엔진 등록 상황 점검- 문구
2. 목표 키워드 다시 선택
3. 순위 경쟁자 벤치 마킹

4. 메인 페이지 재구성
5. 사이트맵 재구성-사람용, 검색엔진 용
6. 사이트맵-메인 연결

7. Title 재구성
8. 섹션 메인 재구성
9. 기타 키워드 전략페이지 제작

10. 디렉토리 등록 강화
11. 링크 가이드 준비 및 배포
12.  + 블로그 /게시판 /포럼

쇼핑몰 디자이너를 위한 최적화 하기

1. 전체 사이트와 현재 페이지의 '목표 키워드'를 숙지 한다.
2. 같은 디자인을 텍스트로 표현하는 방법을 생각한다.
3. 본문은 가능한 텍스트로 표현한다.

4. 본문 제목은 반드시 텍스트로 작성한다.
5. 이미지를 사용했을 경우 ait, title 을 사용한다.
6. title과 meta를 확인한다.

7. CSS를 사용해서 디자인 한다.
8. 웹표준을 준수한다.
9. CSS나 자바스크립트는 외부 파일이나 페이지 하단에 놓는다.

10. 플래시 사용을 자제한다.
11. 프레임을 피한다.

▷ 검색엔진 최적화를 위한 플래시 만들기

1. 시작부터 플래시를 쓰지 않는다.
2. HTML과 플래시를 결합한 페이지를 만든다.
3. 검색엔진 최적화 전략 페이지는 플래시를 쓰지 않는다.
4. 플래시 전용 페이지라도 최대한 태그를 넣는다.
5. 별도 HTML 버전을 만든다.


※ 국내1위 인터넷쇼핑몰 창업교육 아카데미 나우앤 http://nowand.com

Posted by 나우앤


인터넷쇼핑몰 검색엔진 최적화 123

메인 상단의 중요성, 왼쪽 메뉴, 카테고리, 메인페이지, 상품 상세페이지의 검색엔진 최적화 기본을 알아보겠다. 쇼핑몰 마케팅 전략과 함께 쇼핑몰 제작 기획 단계에서 본 내용들이 충실한 쇼핑몰솔류션 및 웹디자인을 제작해야겠다.

① 상단 반복

로고 : 링크 + ALT 태그
하위 페이지 로고의 alt 태그 : 해당페이지 타이틀 키워드로 자동 변환
(하단에서 메뉴를 텍스트와 링크로 반복하는 것도 효과적이다.)
상단 메뉴 : 텍스트 +CSS

②왼쪽 메뉴

사용자의 눈
검색 키워드 중심 메뉴(카테고리) 구성 + 사이트 특성 메뉴
검색엔진의 눈
키워드
텍스트>조각 이미지> 프레임> 플래시

③ 메인 페이지

상단 : 검색엔진과 사람을 부르는 텍스트 문구(키워드와 카피)
 최근 추가된 상품(신상품, 베스트 상품)이나 이벤트 링크
최대한 단순하게

④ 카테고리 페이지

하위 페이지 링크 모음
카테고리 이름 ( 타이틀, 메타 태그(단수, 복수, 오타등 ) )
본문 제목 (H1, H2 태그)
현재 위치 단계 텍스트 링크
상품이지미 링크 (ALT 태그)
전시 상품 텍스트

⑤ 상품 페이지 (상세페이지)

검색엔진에 잘 나오기 좋은 페이지
분명한 키워드와 직접적인 홍보 카피의 조합
이미지 ( alt 태그)
풍부한 설명 : 안내, 비교, 평가, 보장(신뢰)...
관련 상품, 묶음 상품 ...


※ 상품페이지 설득 포인트 : 컨텐츠 전략

가격, 성능 : 비교, 평가자료
이미지 : 패션 코디, 유행
질, 신뢰 : 원료, 브랜드
안전, 신선도 : 인증, 보장 내용


※ 국내1위 인터넷쇼핑몰 창업교육 아카데미 나우앤 http://nowand.com


Posted by 나우앤


후이즈, 쇼핑몰 솔루션 업그레이드 오픈  


비즈니스 포털 후이즈가 2002년부터 서비스해 온 온라인쇼핑몰 구축 솔루션을 전면 업그레이드 한 쇼핑몰 솔루션 버전 3.0 ‘블루리본’(www.whoismall.com)을 오픈 한다.

쇼핑몰 구축 솔루션 ‘블루리본’은 새롭게 신설 된 전문 서버 관리팀의 철저한 관리를 통해 안정적인 서비스를 지원하며, 상품을 클릭했을 때 뜨는 시간을 최소화 하는 등 전체적인 시스템 기능을 향상시켰다.

창업자 및 창업의 특성에 따라 맞춤형 쇼핑몰을 제작할 수 있도록 쇼핑몰창업을 처음 하는 사람을 위한 상품, 기업형 사업자를 위한 상품, 해외시장 진출을 위한 상품 등으로 솔루션 상품군을 나누어 서비스하는 것도 특징이다.

부가서비스 또한 한층 강화됐다. 기존의 국내 오픈마켓 판매 지원 서비스와 함께 라쿠텐, 야후재팬, 후이즈이치바 등 일본 오픈마켓 판매 지원 서비스를 제공하며, 해외 판매 시 번역 서비스를 무료로 제공한다.

또한, 쇼핑몰의 기업화, 대형화의 추세에 맞추어 체계적인 쇼핑몰 경영을 할 수 있도록 회계, 총무 기능이 강화 된 그룹웨어 ‘경영관리 솔루션’을 무료로 제공하고, 무료메일 계정을 최대 20개까지 제공한다.

‘블루리본’ 출시를 기념 해 신규 창업자에게 오는 4월 30일까지 블루리본 1개월 무료이용권 및 전자결제 가입비 무료 등 초기 쇼핑몰 창업을 위한 준비를 무료로 지원한다.

또한, 블루리본 신규 신청자 또는 업그레이드 신청자를 대상으로 추첨을 통해 블루레이 지원 플레이스테이션, 삼성 블루카메라, 불가리 블루 클래식 향수, 블루로즈 꽃바구니 등의 ‘블루’가 들어 간 상품을 지급하는 이벤트를 진행 중이다.


※ 국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com

Posted by 나우앤

메이크샵으로 만드는 성공쇼핑몰 창업&운영
 


강윤령, 최재용| 웰북| 2008.12.29 | 376p 

메이크샵 솔루션을 이용하여 성공 쇼핑몰 구축

하루에도 몇 십 개의 인터넷 쇼핑몰이 새로 만들어지고 사라진다. 이런 상황에서 쇼핑몰을 창업하거나 운영하는 일은 쉬운 것 같지만, 막상 실행하려면 준비해야 할 것들이 많다.

이 책은 인터넷 쇼핑몰 제작자와 인터넷 비즈니스 전문가가 함께 저술하였으며 메이크샵 솔루션을 이용하여 쇼핑몰을 창업하고 운영하는 방법을 알려주고 있다. 창업을 위한 준비절차에서부터 아이템 선정, 쇼핑몰 구축, 회원관리, 프로모션 등의 내용이 담겨있다.

 
IT의 발달로 각 가정에는 대부분 인터넷이 설치되어 있습니다. 그만큼 컴퓨터로 인터넷을 할 수 있는 기회가 많아졌고 홈쇼핑보다 컴퓨터를 이용해 다양한 쇼핑하기가 쉬워졌습니다. 이런 상황으로 인해 인터넷에는 수많은 종류의 제품과 그 제품을 판매하는 쇼핑몰들이 생겨나고 있습니다.

하지만 하루에도 수많은 인터넷 쇼핑몰이 사라지거나 새롭게 만들어지고 있는 상황에서 새롭게 쇼핑몰을 오픈하는 것은 쉬운 일이 아닙니다. 그러나 쇼핑몰을 만들 때 계획을 잘 세우고 솔루션 업체를 잘 선정하여 비용을 절감할 수 있다면 성공하는 쇼핑몰을 구축할 수 있습니다. 이 책은 성공한 쇼핑몰들이 선택한 메이크샵 솔루션을 이용해 쇼핑몰을 창업하고 운영하는 방법을 알려줍니다.

쇼핑몰을 창업하거나 운영하는 일은 쉬운 것 같지만 막상 실행하려면 준비해야 할 것이 많습니다. 하지만 솔루션이 되어 있는 업체를 이용한다면 좀더 쉽게 준비할 수 있습니다. 이 책은 인터넷 쇼핑몰을 창업하고 운영하는 사람들이 선택하는 메이크샵 솔루션을 이용해 쇼핑몰을 간편하게 구축하고 운영할 수 있는 방법을 알려줍니다. 이 책으로 성공하는 쇼핑몰을 만들어 보기 바랍니다. [예스24 제공]

저자 : 강윤령 컨설턴트

제일은행/연합캐피탈/석유화학공사 등 다수 홈페이지 작업
발레아이/보고스샵/로사플라워, 터미널플라워 등 쇼핑몰 작업
전)아트피아디자인 스쿨 그래픽 전임강사
이세븐데이/웰빙붐 쇼핑몰 운영
여성인력개발센터(송파,강남,서초,종로) 강의
시울시 창업스쿨 마케팅 강의
쇼핑몰창업 컨설팅/디자인
인천지역 특성화 고등학교 산학겸임교사
서울시 특성화 고등학교 동아리지도교사
샵인사이드교육센터 종합과정 강의

저자 : 최재용 교수

인터넷 비즈니스 전문가
숭실대 행정학과 졸업, 공주대학교 대학원 전자상거래 전공
한국 까르프, GS홈쇼핑 상품기획 MD
열린사이버대 온라인창업학과 교수
인터넷 쇼핑몰협회 사무총장
네이버 카페 인터넷 창업연구소 소장
MD KOREA 컨설팅 대표
미국 GLG 마케팅 그룹 컨설턴트

저서)
『나는 매일 G마켓으로 출근한다』(2006, 도서출판 비비컴)
『나는 매일 대박 쇼핑몰로 출근한다』(2007, 도서출판 비비컴)


Chapter 01 인터넷 쇼핑몰 창업

Section 01 인터넷 쇼핑몰 창업을 위한 준비
Section 02 쇼핑몰 창업절차 알아보기
Section 03 아이템 선정
Section 04 쇼핑몰 사이트 기획하기
Section 05 시장조사
Section 06 사업계획서 작성
Section 07 상호명/도메인 결정하기
Section 08 쇼핑몰 사업자 등록하기
Section 09 쇼핑몰 구축방법과 디자인/상품 등록
Section 10 포장/배송 관리
Section 11 카드 결제 연결
Section 12 검색엔진 등록
Section 13 키워드 광고

Chapter 02 메이크샵으로 쇼핑몰 구축하기

Section 01 메이크샵 회원 가입과 쇼핑몰 신청
Section 02 쇼핑몰 구축하기
Section 03 쇼핑몰 보안 서버 설정
Section 04 쇼핑몰 디자인 설정 시즌2
Section 05 신용카드 결제/계좌 이체 설정
Section 06 쇼핑몰 운영기능 설정
Section 07 쇼핑몰 관리기능 설정
Section 08 쇼핑몰 에스크로 설정
Section 09 내 쇼핑몰, 결제 시스템 ID
Section 10 내 도메인 알리미

Chapter 03 메이크샵에 상품 등록하기

Section 01 판매상품 기본관리
Section 02 상품별 추천(관련)상품 관리
Section 03 상품관리 부가기능
Section 04 등록상품 일괄관리
Section 05 옵션카페테리아(상품옵션)
Section 06 공급자 직배송 시스템
Section 07 新 이미지뱅크
Section 08 상품 상세 마법사 기린 2.0

Chapter 04 주문 관리와 효과적인 회원/커뮤니티 관리

Section 01 효과적인 주문관리
Section 02 주문관리 및 배송관리
Section 03 장바구니 및 매출분석
Section 04 현금 영수증 관리
Section 05 BEE BANK(자동 입금 확인)
Section 06 회원/CRM 관리하기
Section 07 게시판/메일 관리와 고객상담(CRM) 관리
Section 08 메일(웹메일) 관리

Chapter 05 쇼핑몰 프로모션과 접속통계

Section 01 쇼핑몰 프로모션 기능 선택
Section 02 쇼핑몰 이벤트/사은품 기능
Section 03 쉬운 기획전 서비스
Section 04 운영자 일기
Section 05 경매 공동구매
Section 06 핸드폰(SMS) 발송/관리
Section 07 회원등급별 쇼핑몰 설정과 회원관리 프로모션
Section 08 왕대박 쿠폰 발행서비스
Section 09 紙,종이쿠폰 발행서비스
Section 10 실시간 알리미서비스, 셀마
Section 11 쇼핑몰 성장 리포트와 접속통계

Chapter 06 메이크샵 부가기능 사용하기 - 플래시 템플릿

Section 01 플래시 템플릿과 흐르는 플래시
Section 02 태그 클라우드와 플래시 메인배너
Section 03 플래시 최근 본 상품과 플래시 스텝 배너

Chapter 07 개별디자인

Section 01 HTML 태그 알아보기
Section 02 개별디자인
Section 03 메인디자인
Section 04 쉬운 디자인 서비스
Section 05 개별디자인을 이용한 나만의 쇼핑몰 디자인
Section 06 개별디자인을 이용한 왼쪽메뉴 관리
Section 07 개별디자인을 이용한 로그인폼 관리
Section 08 개별디자인을 이용한 중앙화면 관리
Section 09 개별디자인을 이용한 하단메뉴 관리

Chapter 08 동영상몰

Section 01 동영상몰, MallTB란?
Section 02 동영상 관리
Section 03 MallTB mini 관리 [인터파크 제공]


※ 국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com

Posted by 나우앤

쇼핑몰 홈페이지의 구성 요소 제작


- 친숙한 레이아웃으로 이루어져 있어 사용하기 편한 사이트
- 버튼이나 매너 등 하이퍼링크를 지닌 요소를 한번에 알수 있는 사이트
- 구매 절차가 간단하고 결제가 원활히 이루어지는 사이트
- 시선의 흐름에 따라 상품이 잘 보여지고 있는 사이트
- 색상니나 질감이 눈에 부담을 주지 않아 오랫동안 머무를 수 있는 사이트


1. 웹호스팅의 이해

웹호스팅이란?

대현통신업체나 전문회사에서 웹서버를 개인 또는 업체에 제공하거나 임대해주는 서비스
즉, 인터넷 홈페이지를 대신 운영해 주는 서비스업을 말한다.
예) 'http://www.회사이름.co.kr(혹은 com)

- 별도로 서버를 구축하기 어려운 개인이나 업체가 많이 이용하고 있다.

- 현재 사이트의 90%이상이 하나 이상의 호스팅 서비스를 이용하고 있다.
- 초기 개발 비용을 대폭 절감할 수 있으며, 홈페이지 관리도 쉽다는 장점이 있다.


2. 쇼핑몰 호스팅 (mall hosting)

1) 임대형솔루션 : 메이크샵, 카페24, 후이즈 등

2) 독립형솔루션 : 모닝몰, 고도몰 등
3) 상품등록 및 주문관리 시스템, 결제시스템, 디자인 적용 솔루션 제공
4) 웹FTP기본형 제공, 기본 이메일 계정 제공, 트래픽 제공 등


3. 이미지 호스팅 (image hosting)

오픈마켓이나 이미지 사용량이 많은 사이트를 운영할 때 사용하는 서비스

제공파일 형식 : JPEG, GIF, PNG, SWF로 제한되고 그 이외의 파일은 업로드 할수 없다.

도메인 호스팅

서버 호스팅
메일 호스팅
스트리밍 호스팅


4. 웹사이트 레이아웃

레이아웃이란?

웹에서 보여지는 기본적인 틀을 말하며 구성요소들을 어디에 위치 시킬 것인지를 결정한다.
예) 주요 메뉴의 위치, 배너의 위치, 아이콘의 위치 등
외) 임대형 쇼핑몰솔루션은 기본 레이아웃만 제공된다.

자주 사용되는 기본 레이아웃의 종류




5. 쇼핑몰 홈페이지 구성요소 제작기법

포토샵을 이용한 전체 디자인

웹에디터를 활용한 HTML코딩
포토샵을 이용한 배너/아이콘 디자인
플래시를 이용한 배너 디자인


※ 국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com

Posted by 나우앤

쇼핑몰기획과 상품페이지제작 노하우


1. 웹사이트의 절대불변의 원칙

⑴ 상식이 통하는 웹사이트가 성공한다.

사용자를 고민하게 하지 마라
광고 디자인- 훑어보기 위한 페이지 디자인
불필요한 단어는 삭제하라
홈페이지는 웹디자이너의 전유물이 아니다.

⑵ 인터넷쇼핑 사이트와 구매자

쇼핑사이트 : 개인쇼핑몰, 종합몰, 소호몰, 오픈마켓 등
구매자 : 사이트 검색 → 제품 검색 → 구매여부 결정


2. 상품설명페이지 제작

⑴ 상품설명(상세)페이지란?

쇼핑몰 또는 오픈마켓에서 아이템에 관한 정보를 보다 자세히 보여주기 위해 이미지와 텍스트로 구성된 페이지

페이지의 길이는 제한이 없지만 폭은 판매사이트 자체 디자인에 따라 제약이 있다.
예) G마켓 상품페이지 폭 : 830 px

⑵ 상품설명페이지의 구성 요소

메인배너 : 미니샵 콘셉트 표현, 사은품 정보, 이벤트 소개
신상품 리스트/ 베스트 판매 상품 리스트 : 갤러리처럼 하이퍼링크를 이용하여 바로가기 기능 설정
모델컷/야외컷/스튜디오컷/마네팅컷/제품 상세컷
사이즈 정보 : 사이즈표, 측정방식을 보여주는 이미지
공지 사항 : 배송정보, 교한환불조건, 고객센터


3. 상품상세페이지 기획 방향

상품을 정확하게 보여라
페이지 디자인의 일관성을 지녀라
디자이너와 충분히 대화하라
프로그램의 전문가가 될 필요가 없다
방문자들의 시선을 제품에 집중시켜라


4. 웹페이지 제작 필수 프로그램

⑴ 포토샵
필수도구 사용법, 레이어의 이해, 사진보정 기법, 텍스트 입력 방법 등

⑵ HTML 태그
이미지태그, 정렬태그, 링크태그 등

⑶ 인터넷 상식
호스팅, FTP, 경로, 도메인 등


※ 국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com

Posted by 나우앤

엑스퍼넷, 이미지로 상품 검색 서비스

이미지 검색 서비스 제공 업체인 엑스퍼넷은 상품 이미지를 이용해 상품 검색이 가능한 엑시알지비(EXSIRGB) 유사 상품 검색 서비스를 오픈했다. 엑시알지비-SIS는 ▲상품 이미지의 컬러, 형태, 질감 요소를 전체적으로 비교하는 기본 검색과 ▲상품의 형태만 비교하는 세이프 검색, ▲상품의 메인 컬러만 비교하는 아이템 컬러 검색 등을 제공한다.


쇼핑몰사진 이미지검색


EXSIRGB에서 제공하는 유사 이미지 검색 서비스는 대규모의 범용 영상들 속에서 질의영상과 유사한 영상들을 검색해 주는 서비스 입니다.

이러한 비주얼 유사 이미지 검색의 가장 큰 특징은 키워드를 입력하지 않아도 직관적으로 이미지를 선택해서 클릭하기만 하면 이미지 검색 엔진이 사용자가 의도하였던 것 이상의 유사한 이미지들을 방대하게 노출시켜 줌으로써 컨셉이 모호한 경우에도, 특별히 무엇을 찾아야 할지 모르는 경우에도 끊임 없이 이미지를 따라 들어가면서 새로운 이미지를 발견하게 되는 즐거움을 느낄 수 있다는 것입니다.

또한 멀티-모달(Multi-modal) 이미지 쿼리 프로세싱을 제공하여 단순히 이미지를 랜덤 노출시키는 것 말고도 키워드 검색 결과 내 이미지 재 검색, 업로드 검색, URL 검색, 컬러 검색, 인물 검색 인터페이스 등을 복합적으로 연계하는 다중 검색 서비스를 제공하고 있습니다.

EXSIRGB 서비스에서 제공하는 검색 이미지 종류는 일반 크롤링을 통한 웹 이미지, 제휴를 통한 저작권 이미지, CCL 이미지,뉴스 이미지, 인물 이미지 등 백만 장 이상의 이미지에 대한 색인 DB를 구축하고 있습니다.

현재 패션, 잡화, 인테리어 소품과 같은 상품 검색은 정형화된 상품 사양이 없어 검색이 어려운 경우가 많은데, 엑시알지비-SIS는 이러한 비정형 상품의 비주얼 검색을 가능하게 함으로써 상품 검색의 새로운 장을 열었다.

앞으로 엑시알지비는 국내 최초의 비주얼 이미지 검색 SaaS(Software as a Service) 플랫폼으로서 유사 이미지 검색, 얼굴 탐지 및 인식, 유사 상품 검색 등을 아우르는 비주얼 이미지 검색 ASP 서비스로 발전할 계획이다.

엑시알지비-SIS는 현재 쇼핑몰 아이스타일24(www.istyle24.com)와의 제휴를 통해 상품을 제공하고 있으며, 앞으로 여러 쇼핑몰과의 추가 제휴를 통해 보다 다양한 상품 검색을 제공할 예정이다.

엑시알지비 http://www.exsirgb.com/

※ 국내1위 인터넷쇼핑몰 창업교육 아카데미 나우앤

Posted by 나우앤

검색 순위의 기본 원리
   http://www.seoworkshop.co.kr/

검색엔진 최적화(SEO)는 자신이 목표로 하는 키워드를 가지고 검색엔진이 순위를 매기는 방식에 맞게 컨텐츠를 만드는 것을 말한다. 이것은 홈페이지 뿐 아니라 블로그, 지식검색, 카페 등 검색엔진이 관리하는 모든 검색 영역에서 적용할수 있는 전략이다.

물론 검색엔진에 따라, 접근하려는 영역에 따라, 키워드 상황에 따라 상세한 적용 내용은 차이가 있지만 기본적인 원리는 같다.

그렇다면 검색엔진은 어떻게 1등을 정하는 것일까?

아래의 문서를 살펴보면 기본적인 지식을 얻을 수 있을 것이다.

참고로 이 문서는 "검색엔진 마케팅 60분 가이드"에서 관련 부분을 별도로 편집한 것이다.

이 자료는 PDF로 만들어졌습니다.
읽으시려면 Adobe Reader®가 필요합니다.

 

 ※ 국내1위 인터넷쇼핑몰 창업교육 아카데미 나우앤 http://nowand.com


Posted by 문땡글이

동영상 변환기 'show Ver 1.9a'

show 는 각종 동영상(avi, flv, mov, asf 등)을 상호 변환시켜주는 유틸리티입니다.동영상 뿐 아니라 각종 음악파일(mp3, ogg, wav 등)도 변환기 가능합니다. 3GP, iPod, PSP 의 변환도 지원합니다.

요즘 유행하는 flv <-> avi 동영상 변환에 유용하게 사용하실 수 있습니다. 깨진 파일을 수정기능이 있어서 기존에 변경이 불가능했던 파일들도 SHOW 로 변경이 가능합니다. 타프로그램보다 좋은 기능은 원본 동영상 및 음악파일에 대한 코덱정보 및 데이타정보가 출력되기에 원본 영상 및 음악파일과 똑같은 조건으로 파일형태만 변형이 가능합니다.




출처 및 다운로드 : 네이버 자료실 http://file.naver.com/pc/view.html?fnum=144899&cat=40

메인페이지나 상품 상세페이지 이미지컷을 동영상으로 만들고 쇼핑몰에 올릴때는 용량이 작은 플래시 파일로 변화하여 이미지컷 올리듯이 쇼핑몰을 제작 할수 있는 국산 프리웨어 프로그램입니다.


※ 국내1위 인터넷쇼핑몰 창업교육 아카데미 나우앤 http://nowand.com




Posted by 나우앤

출처 : 카페24(www.cafe24.com)

1.위저드 방식의 빌더(Wizard Builder)란?
카페24의 빌더는 HTML 방식과 위저드(wizard 마법사)방식을 모두 지원합니다.

HTML 방식의 빌더는 사이트 제작 경험 (HTML, CSS 등의 코딩 경험) 이 풍부한 사용자에게 일정 틀에 얽매이지 않는 다양한 형태의 사이트를 제작하는데 유용한 Interface 를 제공합니다.

위저드 방식의 빌더HTML이나 CSS를 직접 코딩하지 않고 스킨과 기능을 선택하는 것만으로 사이트가 완성되도록 구현한 초보자용 홈페이지 마법사 입니다.

위저드방식의 빌더를 이용하여 사이트를 제작하는 과정

2.위저드 방식 빌더의 특징은?

특징 샘플보기
단일메뉴 및 복수메뉴 방식의 2가지 사이트 구조 (레이아웃)를 기본으로 제공합니다. 단일메뉴 사이트
복수메뉴 사이트
다양한 스킨을 무료로 제공합니다. 스킨 샘플 보기
사전 정의 된 모듈을 사용하여 원하는 기능의 메뉴를 간단히 생성할 수 있습니다. 사전정의모듈 샘플 보기
기능별로 무료 디자인 스킨이 제공됩니다. 기능별 디자인 스킨 샘플 보기
빈페이지에는 이지웍에디터가 제공되므로 손쉽게 웹페이지를 제작하실 수 있습니다. 이지웍 에디터 샘플 보기
배경, 메뉴, 타이틀 등 각 디자인 영역 별 디자인 수정이 쉽습니다.
디자인 설정 샘플 보기

3.위저드 방식의 빌더를 사용하려면?

위저드 방식의 빌더는 현재 빌더 호스팅을 사용하고 있는 고객이나 신규로 빌더 호스팅을 신청하실 고객이나 어느 경우에도 제한 없이 사용 가능 합니다.

4. 위저드 방식으로 제작한 템플릿을 HTML 방식으로 전환하기
구분 장점 단점
위저드 방식 사이트의 구조, 메뉴 및 디자인을 간단하게 설정할 수 있으므로 초보자가 사용하기에 용이하다 직접 코딩으로 제작할 수 있는 사이트 영역이
제한되어 있으므로 홈페이지의 상세한 수정이 어렵다
HTML 방식 사이트 제작에 필요한 기능은 모듈로 대체하고
나머지 구조,메뉴,디자인 설정은 직접 코딩을 통하여 제작하므로 디테일한 부분까지 수정할 수 있다.
HTML 이나 CSS 등의 경험이 없는 초보 사용자는
사용하기 어렵다
※ 위저드 방식으로 제작한 템플릿을 HTML 방식으로 전환하여 수정하시면 사이트 제작 시간을 "놀랄만큼" 절약할 수 있습니다.

※ 위저드 방식으로 제작한 템플릿을 HTML 방식으로 전환하셔도 원본 템플릿(위저드 방식으로 제작된 템플릿)은 계속 보존되므로 작업 중에 실수가 있더라도 원본 파일을 이용하여 다시 HTML 방식으로 전환을 시도하실 수 있습니다.


※ 국내1위 인터넷쇼핑몰 창업교육 아카데미 나우앤 http://nowand.com
Posted by 나우앤


고급 홈페이지 제작·운영 "이제 원스톱으로"

홈페이지를 구축 하려면 대부분 업체를 선택하여 실행한다. 하지만 업체를 선택하려고 해도 수없이 많은 업체들 중에 선택 역시 쉬운 일은 아니며, 비용적인 부담이 너무 크다.
소비자들의 이러한 문제를 해결하기 위해 블루웹(www.blueweb.co.kr)은 홈페이지 자동구축 솔루션(이비즈로)을 선보였다고 3일 밝혔다.

이비즈로 쇼핑몰솔루션 바로가기




이어보기 (원본보기)


※ 국내1위 인터넷쇼핑몰 창업교육 아카데미 나우앤 http://nowand.com/

Posted by 나우앤


아이네임즈, 쇼핑몰 무한생성 솔루션 출시

아이네임즈(대표 김태제)는 3일 인커뮤소프트(대표 이현주)와 공동으로 전문몰, 몰인몰, 임대몰, 프랜차이즈 쇼핑몰 등을 무한대로 생성할 수 있는 `쇼핑몰 무한생성' 솔루션을 판매한다고 밝혔다. 이 제품은 웹2.0 기능이 탑재된 쇼핑몰 솔루션의 파일 및 데이터베이스(DB)를 100% 공개해 누구나 쇼핑몰 프로그램을 판매하고 간단한 커스터마이징만으로 주문제작형 쇼핑몰을 구축할 수 있도록 해준다.

이어보기 (원본보기)

아이네임즈/쇼핑몰 바로가기

※ 국내1위 인터넷쇼핑몰 창업교육 아카데미 나우앤 http://nowand.com/

Posted by 나우앤

고객과 친근한 로고가 바로 컨셉이다.

어느 날 한 수강생이 자신이 운영하고 있는 회사의 사이트에 방문해서 사이트를 좀 봐달라고 하면서 명함을 주고 갔다. 집으로 돌아와서 그 수강생이 생각나 명함을 찾아 보면서 혼자 많이 곤란했던 적이 있다. 2가지의 당황했던 부분이 있었는데 우선 로고가 회사의 이름도, 캐릭터도 아니어서 회사의 이름을 무언지 잘 알 수 없다는 것이다.

또 한가지는 명함에 회사 주소 와 직함, 성함이 모두 한자로 기입돼 있어 창피한 이야기지만 찾는데 한참 시간을 투자해서 알아냈던 것이다. 이때 ‘왜 자기 회사를 알리려고 만든 명함에 로고를 제대로 만들어 놓지 않았을까? 로고 하나만 제대로 만들어놔도 회사의 이미지를 쉽게 알릴 수 있을테데..’라고 생각했다. 그래서 이번에는 쇼핑몰 마케팅에서 중요한 역할을 하는 로고에 대해 이야기 하고자 한다.

로고는 브랜드화를 하거나 이미지 차별화를 위해서 매우 중요한 역할을 차지하고 있다. 하지만 아직도 그 부분을 인지하지 못하는 기업이 많다는 것이 안타까운 현실이다.

쇼핑몰의 로고는 처음부터 정형화시켜 계속 연상되게 하는 것이 좋다. 반면에 기업적 이미지의 변신을 위해 로고를 바꾸기도 하는데 최근 대기업들은 몇 십억을 들여가며 로고 교체에 심혈을 기울이고 있다.
 
쇼핑몰을 처음 운영할 때는 중간에 유통망이 변화될 수도 있기 때문에 특정한 상품 등을 활용한 캐릭터나 특정한 내용의 뜻을 담고 있는 로고보다는 쇼핑몰을 기억하기 쉽도록 하는 특정한 텍스트를 활용한 로고가 활용하기에 좋다. 그 예로 이 세가지 경우를 보자.

1. 슬로건과 텍스트+그림을 활용한 로고방법

- 도메인명을 같이 기재해주면 더욱 기억하기가 쉽다.

2. 그림과 함께 텍스트로고를 활용한 로고방법

- 이 경우는 아래 슬로건이나 상호명이 너무 연하면 강조되지 않는 단점이 있다.

3. 텍스트로고에 컬러를 포인트로 활용한 로고방법

- 여기에 회사명을 한글로 표기한다면 더 좋은 로고가 될 것이다.
   
잘나가는 쇼핑몰의 로고를 몇 개 분석해보면 도메인명을 활용하거나 아이템과 매칭할 수 있는 색상으로 포인트를 주는 방식의 로고를 많이 활용한다는 것을 알 수 있다. 또한 고객이 쉽게 읽고 이해할 수 있도록 친근감이 있는 로고를 제작하는 것이 좋다.

이때 판매상품을 기억하기 편리하도록 슬로건을 붙여준다던가, 회사명을 영문으로 표기할 경우 읽기 편하게 한글로 강조를 해주는 경우 더 많은 효과를 볼 수 있다. 또한 그 부분에 즐겨찾기 추가라는 부분의 버튼을 넣어주면 고객들의 컴퓨터에 자동으로 저장되어 자주 방문을 유도할 수 있다.

심리학적으로 분석해보면 대중들은 글씨보다는 그림으로 표현한 것을 훨씬 더 잘 기억한다고 한다. 그래서 단순히 텍스트만 있게 하는 것보다는 글자와 그림을 같이 표현하는 로고방식이 훨씬 더 기억하기 쉽다. 대표적인 예로 인터파크, 농수산홈쇼핑, 옥션, 여인닷컴 등이 있다.

고객은 즐겁거나 흥미로운 것을 보면 기억력이 더 향상되기 때문에 색상도 밝고 경쾌하거나 밝은 캐릭터를 활용해주는 방법도 고객과 친근한 느낌을 더 느끼게 해준다.

이렇게 쇼핑몰 로고는 고객을 끌어들이기 위한 마케팅의 일부분이면서 고객에게 쉽게 어필할 수 있는 감성적인 하나의 도구가 된다.


송현숙

노노스(www.nonosd.com) 대표
한국여성경제인협회 온라인창업 컨설턴트
용인송담대학 경영정보과 인터넷창업 및 마케팅 외래교수
나우앤 컨설턴트



정현정 기자 / jj@fbridge.co.kr
[Copyright ⓒ 패션브릿지 무단 전재 및 재배포 금지]



※ 국내1위 인터넷쇼핑몰 창업교육 아카데미 나우앤 http://nowand.com/

Posted by 문땡글이

상품페이지는 사진, 동영상, 텍스트, 플래시, 리뷰 등 여러 가지 형태가 있다. 또한 예쁜 곳, 심플한 곳, 어려운 곳, 뭐가 너무 많은 곳, 꼼꼼한 설명이 있는 곳 등 종류도 다양하다. 이처럼 상품페이지는 성별과 나이, 환경, 개인 취향에 따라 다를 뿐 아니라 자꾸 변화한다. 그래서 어떤 기준에 맞춰 평균을 내는 것도 쉽지 않다. 고객의 니즈는 점점 다양화, 세분화 돼가고 있는데 반해 국내 중소형 쇼핑몰들은 고등학교 수학여행처럼 비슷비슷하다.



쇼핑몰에서 상품페이지라는 영역은 쉽게 넘길 부분이 절대 아니다. 감각적인 고객을 위해 과감한 상품페이지 혁신과 디자인 감각을 결합해야 함은 물론이고 그 분야에 전문적인 냄새가 나도록 해야 한다. 또한 변화하는 웹 환경에 맞춰 소셜 네트워크와 블로그, 커뮤니티 등과 연계도 쉬워야 한다. 단순한 정보 전달 상품페이지는 더 이상 고객의 구매력을 끌어 올릴 수 없다.

쇼핑몰 상품페이지는 고객이 정말 사고 싶도록 만들어야 함은 당연하다. 그리고 만약 고객이 상품페이지까지 도달 했다면 빠져 나가지 못하도록 아예 구속 시켜버려야 한다. 물론 수갑 채우는 구속이 아닌 아름다운 구속이 되어야 하겠지만.

전자신문 [스마트 쇼핑저널 버즈] 버즈리포트 원본 보기


※ 국내1위 인터넷쇼핑몰 창업교육 아카데미
나우앤 http://nowand.com/

Posted by 문땡글이

'웹디자인의 10계명' businessweek.com의 특집 기사

월드와이드웹은 탄생한지 채 몇 십년 만에 우리 생활의 거대한 일부로 자리잡았다. 온라인 네트워크에 연결되지 않은 컴퓨터는 더 이상 컴퓨터가 아닌 것처럼 보이며, 비단 컴퓨터 뿐만 아니라 휴대폰과 같은 모바일 기기에 이르기까지, 온라인 월드는 다양한 매체를 통해 확산되어 가고 있다. businessweek.com의 특별 리포트 '웹디자인의 10계명'은 전문가들이 선별한 웹디자인에 관한 열 가지 강력한 충고를 담고 있다.

1. 플래시를 남용하지 말라
어도비의 대중적인 웹 애니메이션 기술 플래시는 종종 너무 쉽게 남용되곤 한다. 임시변통의 플래시가 과잉을 이룰때, 이러한 웹디자인은 사이트의 사용성을 떨어뜨리고, 사용자의 웹브라우저를 수렁에 빠뜨리고 만다.

2. 콘텐츠를 숨기지 말라
광고는 분명 사이트의 안정적인 운영을 위해 필요한 요소이지만, 시도때도 없이 튀어나오는 팝업과 전면페이지 광고는, 오히려 사이트의 콘텐츠를 불분명하게 만들고 사이트의 기능성에도 해를 입힌다. 방문자를 덜 괴롭히는 선택적 배너의 광고가 유용할 수 있다.

3. 난잡해서는 안된다
웹은 모든 시대를 통틀어 최고의 아카이브인 지도 모른다. 하지만 내적 구조를 결여한 사이트에서 정보들을 헤쳐다니기란 불가능에 가깝다. amazon.com과 같은 사이트들은 정보의 위계구조(hierarchy)를 디자인 우선순위에 있어 최상단에 두고 있다.

4. 반사 효과를 과용하지 말라
애플은 거의 모든 디자인 영역에서 최고의 디자인 기준을 설정해온 회사다. 하지만 어떤 이들은 애플이 유리에 반사된 제품이미지 효과를 습관적으로 사용하고 있다고 지적하기도 한다. 애플의 제품 이미지들을 보면, 아마도 확실히 느끼게 될 것이다. 너무도 많은 이들이 이 효과를 사용하게 되어, 그 스타일적 요소는 하나의 클리셰가 되고 말았다.

5. 웹 2.0 회사명에 불필요한 잉여음이나 묵음을 쓰지 말라
웹 산업계는 기묘한 작명법을 선호하는 듯 하다. 대표적인 작명 트렌드는 이름에 여분의 모음을 추가하거나, 혹은 전략적으로 모음을 지우는 식이다. Flickr, Smibx, Meebo 등등의 사례를 보라. 이러한 이름들은 기억하기 쉽지만 어딘가 구식의 이름처럼 들리기도 한다. 심지어 Yahoo!, Google 이래로 바보같은 이름의 도메인들이 클리셰처럼 통용되는 현실이다.

6. 타이포그래피를 숭배하라
초고속 인터넷이 보편화된 요즘에도, 평범한 텍스트 중심의 웹디자인이 두 번째 첨단의 바람을 불러오고 있다. 주류 사이트인 Craigslist, 디자이너 중심 사이트 Coudal Partners, 인기 블로그 Daring Fireball 등은모두 이러한 사례로 꼽을 만한 사이트들이다.

7. 열중의 경험을 창조하라
Facebook이나 YouTube는 웹디자인이 아니라 강력한 콘텐츠와 기능으로 사용자들을 끌어들였다. 무엇보다도 사람들의 관심을 끌 수 있는 웹사이트를 만들어내는 일이 가장 중요하다.

8. 사회적이어야 한다
온라인을 기반으로 소통하고 상호작용하는 인터넷 문화에 주목해야 한다. Myspace와 같은 사이트가 그 대표적인 사례다. 더 나아가 디자이너들은 광고나 온라인 업무 생산성에 이르기까지, 다양한 분야의 사이트에서 이러한 요소들을 여과시키고 있다.

9. 검증된 기술들을 수용하라
Wikipedia, YouTube, Faceboo처럼 일상의 일부가 된 대표적인 사이트는 기술적 요인을 디자인 안에 능숙하게 통합, 친숙한 기능과 인터페이스를 제공함으로써 사용자들을 유의미한 방식으로 서로 연결시킨다.

10. 콘텐츠가 왕이다
낡은 슬로건처럼 들리겠지만, 여전히 유의미한 충고이기도 하다. 아름다운 디자인이 텅빈 사이트를 보충해 줄 수는 없는 일이다.

출처 : 디자인 플럭스 http://www.designflux.co.kr/


Posted by 문땡글이

인터넷쇼핑몰, 이렇게 디자인 하자 
 
쇼핑몰 디자이너로 일을 하다 보니 쇼핑몰 오픈한지 한달도 되지 않아 솔루션과 디자인을 다시 바꾸는 경우를 종종 보게 된다. 비용과 시간도 배로 들며 운영자도 지쳐 보여 안타까웠던 기억이 몇번 있다.

쇼핑몰디자인 내가 직접 할까? 맡겨야 하나?

인터넷 쇼핑몰 디자인은 전문업체나 프리랜서 디자이너한테 맡기자!
포토샵, 플래시, html등을 배워서 하는 것도 좋겠지만 배우는 과정도 오래 걸리고 관련 툴을 다룰 줄 안다고 해서 디자인이 잘 나오는 것은 아니다. 전문가에게 맡겨 아이템에 맞게 세련되게 만든 다음 수정이나 업데이트 할일이 있을 경우 원본을 받은 다음 실력인 된다면 그때 부분 수정을 하면서 운영하는게 효율적이다.

의뢰의 경우 업체나 프리랜서 모두 그동안 제작한 포트폴리오를 꼼꼼히 확인하고 제일 중요한 퀄리티를 판단해서 결정해야 하며 가격, 제작기간, 작업서비스 모두 틀리기 때문에 몇 군데 상담을 받은 후 결정하는 게 좋다.

-전문업체(웹에이전시) : 안정된 업무 시스템과 서비스로 제작 진행 가능.
-프리랜서 : 디자이너 마다 차이가 있지만 업체에 비해 저렴한 가격에 높은 디자인 퀄리티를 얻을 수도 있다

사진보정과 상품 상세페이지는 내가 직접 만들자!

포토샵과 간단한 html을 다룰 줄 안다면 사진보정과 상품 상세페이지는 내가 직접 만들자!
쇼핑몰 사이트 만들때 와 달리 상품을 등록하면서 사진과 상품상세페이지 작업은 자주 필요하다. 처음 만드는 경우 어설퍼 보이더라도 자주 해보면 실력과 노하우가 점점 늘기 마련!
쇼핑몰 운영자만큼 자신의 상품의 장단점을 잘 아는 사람은 없으니 내 상품을 더 독보이게 직접 디자인 해보자!

메뉴나 카테고리는 플래시 NO! 이미지 작업으로!

메뉴나 카테고리 작업을 플래시로 하는 경우가 많은데 플래시의 경우 업데이트가 어렵고
디자인을 수정해야 할 경우 원본파일이 없다면 처음부터 다시 만들어야 한다.
플래시를 직접 다루는 경우가 아니라면 이미지 작업으로 하는게 효율적이며 업체의 의뢰한 경우에는 원본을 받아 보관해두자.

쇼핑몰 솔루션 선택은 사용하기 편리한 것으로!

요즘 많이 사용하고 있는 솔루션들은 까페24, 메이크샵, 고도몰 등등 여러 솔루션 들이 있다.
독립몰로 할지? 임대몰로 할지? 먼저 결정한 다음 솔루션기능은 아이템 성격과도 잘 맞아야 하며 상품관리 기능과 디자인 수정이 좀더 편리하고 자유스러운 것으로 알아보자. 해당 솔루션 사이트에 들어가면 사용자체험과 관리자체험 모두 가능하오니 반드시 경험해 보고 운영하기 효율적인 솔루션으로 선택 한다.

-독립몰 : 일정기능의 쇼핑몰을 미리 제작하여 놓은 소프트웨어를 구매해서 사용/ 프로그램 수정가능(ex. 고도몰, 몰쇼핑, 인커뮤 등)
-임대몰 : 독립몰처럼 일정기능의 쇼핑몰을 미리 제작하여 놓은 소프트웨어지만 프로그램 수정에 제한이 있으며
무료 또는 월 얼마씩 임대료를 지불하는 형식으로 호스팅이 포함되어 있다.(ex. 까페24, 메이크샵, 고도몰 등)

인터넷 쇼핑몰 프리랜서 웹디자이너 : <5월3일>

[프라임경제] 원본 보기

Posted by 문땡글이
영원히 잊지못할 홈페이지 만드는 7가지 방법

웹 사이트에서 가장 중요한 것은 그 사이트가 고객들의 기억에 남도록 해야 한다는 것이다. 또한 고객에게 무엇을 보여주고 기억하게 해야 하는지는 회사의 사업 모델과 시장상황에 따라 결정해야 한다.

고객들은 자신이 직접 생각해 내거나 다른 사람을 통해서 듣는 등의 방법으로 웹 사이트 를 기억하게 되는데, 이러한 점을 잘 생각해서 고객들의 마음속에 회사의 사이트를 새 겨 넣을 수 있도록 해야 한다.

그렇다면, 고객들이 회사의 사이트를 잘 기억하도록 하기 위해서 어떻게 해야만 할까?
심리학적 연구에 따르면, 어떤 것들을 기억에 남도록 할 때 쓸 수 있는 방법들로 다음과 같은 것들이 있다.

1. 처음과 마지막을 인상 깊게 한다.
 
학계의 연구에 의하면, 사람들은 대게 순서에 따라 차례대로 무언가를 볼 경우, 중간에 있는 것들 보다는 가장 먼저 본 것과 가장 나중에 본 것들을 더 잘 기억한다.
이 사실을 웹의 관점에서 생각해 본다면 고객들은 자신들이 방문한 사이트에서 중간 중간에 나오는 페이지들 보다는 가장 먼저 나오는 페이지와 가장 나중에 나오는 페이지를 더 잘 기억할 것이라는 것을 알 수 있다.

또한 특정한 한 페이지를 보는 경우에는 페이지에서 중간에 보게 되는 것 보다는 가장 먼저 보게 되는 것과 가장 나중에 보게 되는 것을 더 잘 기억하게 될 것이다.

그렇기 때문에 웹 사이트에서 첫 번째 페이지가 무척 중요하다. 첫번째 페이지는 고객들이 사 이트를 방문했을 때 가장 먼저 마주치는 것이기 때문에 보다 재미 있고, 흥미롭고, 인 상 깊어야 한다. 고객들이 사이트의 첫 페이지도 기억하지 못한다면 사이트에 있는 다른 것들은 어떻게 기억 하겠는가?


2. 정보를 묶어서 함축적으로 표현한다.
 
일반적으로 한 사람이 짧은 시간 동안 한번에 처리해 낼 수 있는 정보의 양은 3 가지에서 7 가지 정도의 정보 묶음(chunk of information) 이다. 그러나 최근 연구에 따르면, 이 수가 3 가지나 4 가지 정도 밖에 안 될 거라고 한다. 그러므로 길고 복잡한 정보들은 고객들이 쉽게 받아들일 수 있도록 몇 개의 단위로 나누어 놓는 것이 좋다.

이러한 예 중 대표적인 것으로 두문자어가 있다. 인터내셔널 비즈니스 머쉰즈 (International Business Machines)나 켄터키 프라이드 치킨(Kentucky Fried Chicken)을 IBM 이나 KFC 로 나타내면 회사 이름을 단 한 마디로 발음 할 수 있게 된다.
또는 전화 번호를 일일이 숫자로 표현하지 않고 1-800-CAL-HOME, 1-800-I-SEE-2020, 1-800-GO-U-HAUL 처럼 문자로 나타내면 고객들이 쉽게 그 번호를 기억하게 할 수 있다.

또한 http://www.cdnow.com 처럼 그 사이트가 하려고 하는 일을 웹 주소에 나타내면 훨씬 기억하기가 쉬울 것이다. 여러 가지 정보들을 한 마디의 말로 묶어서 표현해 낼 수 있다면 사이트가 하려고 하는 일들을 더 인상 깊게 나타낼 수 있다.

예를 들면, 어스메드닷컴(earthmed.com) 의 ‘건강에 관한 모든 것들(dedicated to holistic health)’ 라는 표어는 이 회사가 하는 일, 즉 요가, 침술, 명상, 생체 자기제어, 전문적인 다이어트 기법 등의 2 차적인 의료 방법들을 통해서 건강과 관 련된 여러 가지 문제들을 알아내고, 조사하고, 치료하거나 예방하는 것을 도와 준다는 것을 함축적으로 나타내고 있다.

3. 암송 시킨다. (Rehearsal)

암송(rehearsal)시킨다는 것은 소비자들이 회사가 기억시키고 싶은 정보들을 무의식적으로 말하게 한다거나 생각하게 하는 것을 말한다. 선전 노래나 표어를 이용하면 고객들이 쉽게 암송하게 할 수 있다. 예를 들어 맥도날드(McDonalds) 는 빅 맥(Big Mac)에 넣는 재료들을 기억시키기 위 해 “참깨가 뿌려진 빵 위에 두 개의 소고기, 특별 소스, 상추, 치즈, 피클, 양파 (Two all-beef patties, special sauce, lettuce, cheese, pickles,
onions on a sesame seed bun)” 라는 문구를 사용하고 있다. 웹에서 이렇게 하는 것이 쉽지는 않겠지만, 웹 콘테츠에도 사운드를 많이 넣고 있으므로 앞으로 사용될 가능성이 점점 높아지고 있다.

4. 반복해서 보여 준다.
 
물은 계속 같은 관에 주입되면 그 안에서 계속 맴돌게 된다. 마찬가지로 사람은 같은것을 반복해서 보게 되면 그것이 머리 속에 계속 맴돌게 된다. 즉 자꾸 반복하게 되면 기억할 수 밖에 없다. 고객들이 사이트의 주소를 외우도록 하고 싶다면 사이트의 여러 곳에서 주소를 반복해서 보도록 만들면 된다. 보면 볼수록 점점 더 잘 기억하게 되는 것이다.
물론 이렇게 반복해서 보게 하면 주소 를 기억하게 되는 것이지 고객들이 사이트를 더 좋아하게 된다는 것은 아니다.
그리고 지나치게 많이 보여 주면, 고객들은 그것 때문에 짜증이 날 수도 있다. 고객들은 이러 한 것은 절대 잊지 않으므로 주의 해야 한다.

5. 여러 가지 암시를 준다 .

사람들은 접하게 되는 여러 가지 정보들이 자연스럽게 연결될 때 더 잘 기억하게 된다. 그러므로 고객들이 웹 주소, 표어, 로고 등을 잘 기억하게 하려면 그것들이 나타내는 것들을 일치하도록 해야 한다. 예를 들어, 어스메드닷컴(earthmed.com)은 청진기와 지구가 같이 그려져 있는 로고 를 사용해서 자신들이 2 차적인 의료 방법들에 대한 정보를 세상에서 가장 많이 가지 고 있다는 것을 표현하고 있다. 회사의 대변인인 건강 분야 권위자 앤드류 웨일(Andrew Weil) 의 사진도 썼다.
이런 모든 여러 가지 암시를 통해서 고객들이 사이트의 이름이나, 표어, 대변인, 이점들을 기억하게 할 수 있다.

6. 그림과 글을 같이 써서 표현한다.
 
심리학 분야에서의 오랜 연구에 따르면 사람들은 그림으로 표현된 것들을 더 잘 기억한다. 왜 그럴까? 이것은 그림으로 본 것들은 글로 읽은 것 보다 기억이 더 오래가기 때문이다.

그러므로 가능한 그림을 많이 쓰는 것이 좋다. 그리고 정말 중요한 것을 말하고자 할 때는 그림과 글을 같이 쓰도록 해야 한다. 이런 ‘이중 표현(dual coding)—시각과 언어로 같이 표현하는 것’ 을 통해서 고객들은 단어와 그림, 두 가지를 통해서 기억하게 된다.

7. 고객의 기분을 맞춰준다.
 
사람의 기억력은 기분에 따라 달라진다. 일반적으로 기분이 좋은 상태에서는 기억력이 향상된다. 그러므로 사이트가 재미있고 흥미로워서 사용자들의 기분이 좋아진다면, 사용자들은 사이트에서 본 내용을 더 잘 기억하게 될 것이다. 또한 사람들은 대게 자신의 현재 기분에 맞는 정보들을 먼저 떠올리게 된다. 만약 지금 즐거운 기분이면, 즐거운 기분을 느끼기 해 주는 사이트가 생각나게 된다. 그리고 빈둥거리고 싶을 때는 그에 적당한 사이트를 생각하기 마련이다.

고객들이 사이트를 잘 기억하도록 하고 싶다면, 미리 많은 것들을 생각하고 준비해서 고객들이 그냥 가만히 앉아서 인상적인 경험을 할 수 있도록 해야 한다.



쇼핑몰제작 홈페이지제작 마케팅 쇼핑몰창업
국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com/
Posted by 문땡글이

카페24 경쟁력은 ‘기술’과 ‘서비스’ -심플렉스인터넷 이재석 대표

심플렉스인터넷(대표 이재석 www.cafe24.com)은 웹호스팅, 서버호스팅 서비스를 제공하고 있는 ‘카페24’를 운영하고 있다. 최근 별도의 비용 없이 편리하게 쇼핑몰을 운영할 수 있도록 제반 서비스를 제공하는 ‘쇼핑몰 솔루션’ 분야에서도 선두를 달리고 있는 것.

그 결과 심플렉스인터넷의 회원 수는 5월말 기준 300만 명을 바라보고 있다. 이는 국내 인터넷 사용자가 3,000만 명임을 감안할 때 10%에 육박하는 규모의 유저가 ‘카페24’를 찾고 있는 셈이다.

이에 따라 매출 성장도 눈부시다. 2002년까지 완만한 곡선을 그렸던 매출액은 2004년 들어 약 43억원, 2005년 약 53억원, 2006에는 약 79억원, 지난해에는 전년대비 수준을 훨씬 넘어선 약 130억원을 기록했다. 올해는 신규 사업 진출과 함께 쇼핑몰 솔루션 활성화로 약 220억원을 기록할 것으로 예상하고 있다.

이 같은 성과로 인해 지난해 7월 말 업계 최초로 구글코리아의 새로운 공식 리셀러(Google Authorized Reseller)로 ‘카페24’가 선정되기도 했다.

이밖에 심플렉스인터넷은 온라인 마케팅을 지원하는 ‘카페24 마케팅센터(marketing. cafe24.com)’, 쇼핑몰 디자인 사이트 ‘카페24 디자인센터(d.cafe24.com)’, 실시간 증권 방송서비스 ‘이챗’(echat.co.kr), 패션·뷰티 전문 리쿠르팅 사이트 ‘유저24(user24.com)’ 등을 운영하는 것은 물론 서버관리, 도메인 등록 서비스에 이르기까지 IT 비즈니스 관련 사업을 아우르고 있다.

심플렉스인터넷의 성공요인은 바로 ‘기술력’이다.

이 회사는 오랜 경험과 노하우를 바탕으로 최신 기술을 선도하고 있다. 세계 최초로 64비트 호스팅 서비스를 선보여 호스팅 분야의 새 장을 열었으며, 업계 최초로 전 라인 광망을 개설해 주목 받기도 했다. 특히 IT관련 전문가 그룹으로 구성돼 있는 기술연구소에서는 네트워크의 안정성과 속도를 개선하는데 집중하고 있다.

이와 함께 철저한 ‘고객중심 마인드’도 한 몫 했다. 심플렉스인터넷 곳곳에는 ‘차별화된 서비스를 제공함으로써 고객을 만족시킬 수 있어야만 기업이 살아남을 수 있다’는 기업의 기치가 곳곳에 녹아있다. 사내 서버실은 물론 KT, 하나로 IDC에는 시스템 관리자들이 24시간 대기하면서 혹시 발생할 수 있는 문제를 사전 예방하고 있으며, 고객들의 목소리에 귀를 기울일 수 있는 전담 지원팀이 상시 운영되고 있는 것이 특징. 또 마케팅센터를 통해 고객들에게 높은 수준의 온라인 마케팅 서비스도 지원하고 있다.

이밖에 이재석 대표의 직관력도 크게 작용하고 있다. 이 대표는 변화 흐름을 정확히 판단하고 대응할 줄 안다. 전문성이 없는 새 영역을 무리하게 개척하는 것이 아니라 미래 수익성이 높은 아이템을 중시하고 안정적인 수익 창출 기반을 마련하는데 최우선을 두고 있다. 설립 9년이 채 되기도 전에 심플렉스인터넷이 명실공히 경쟁력을 갖춘 기업으로 성장한데는 이 대표의 이 같은 에너지가 한 몫 했다.

다음은 이재석 대표와의 일문일답.

심플렉스인터넷에 대한 소개를 하자면.  
심플렉스인터넷은 쇼핑몰 솔루션, 온라인 마케팅 컨설팅, 웹·서버 호스팅 등 일체의 IT 서비스를 제공하고 있는 인터넷 비즈니스 기업입니다. 현재 우리 회사는 ‘카페24 쇼핑몰 솔루션’, ‘카페24 마케팅센터’, ‘카페24 호스팅’ 등 ‘카페24’라는 브랜드를 통해 각각의 서비스를 제공하고 있습니다.

‘카페24 쇼핑몰 솔루션’은 누구나 쉽게 구현할 수 있는 쇼핑몰 구축 프로그램으로, 상품 전시에서부터 판매·마케팅 등에 이르기까지 다양한 기능을 지원하고 있습니다. 초기 설치비·세팅비·월 이용료 모두 무료로 운영되고 있으며, 상품 등록 수·트래픽·사용기간 모두 무제한입니다. 현재 카페24 쇼핑몰 솔루션은 성능·편의성 측면에서 30만 사용자들로부터 인정을 받고 있습니다.

‘카페24 마케팅센터’에서는 인터넷 비즈니스 고객들에게 오버추어, 구글, 네이버, 다음 등 검색엔진을 통해 효과적으로 마케팅 할 수 있는 노하우를 컨설팅하고 있습니다. 또 전문인력들로 구성된 컨설턴트 그룹이 광고 효과가 높은 데이터를 분석해줌으로써 고객들의 비즈니스 성공을 돕고 있습니다.

‘카페24 호스팅’은 오랜 경험과 노하우를 바탕으로 최신 기술을 선도하고 있는 브랜드입니다. 세계 최초로 64비트 호스팅 서비스를 실시하고 업계 최초로 전 라인 광(光) 망을 개설하는 등 호스팅 업계를 선도하고 있으며 SSD 호스팅, 홈페이지 게시판 스팸 필터, 오라클·큐브리드·PostgrSQL 호스팅 등 양질의 서비스를 제공하고 있습니다.

인터넷 비즈니스와 인연을 맺게 된 계기는.  
심플렉스인터넷을 설립하기 전 다양한 사회 경험을 통해 IT 분야에 관심을 갖기 시작했습니다. 그리고 인터넷 통신 분야가 최고의 고부가가치 산업이 될 것이라는 확신을 가지게 되었습니다.

초기 ‘채팅’,‘커뮤니티’ 등 사업을 진행하면서 고객들에게 밀접한 인프라 사업이라 할 수 있는 호스팅 분야로의 진출까지 염두에 두게 되었습니다. 호스팅은 인터넷 사업 중 기초 인프라가 될 수 있는 분야였고, 고객에게 가치를 창출할 수 있는 분야였기 때문입니다.

실제로 카페24 호스팅으로 인해 인터넷 사용자들이 쉽게 접근할 수 있었던 것은 물론 국내 네트워크 인프라가 확산될 수 있는 계기를 마련했다고 자부합니다.

또 카페24 호스팅을 운영하면서, 전자상거래가 가능한 쇼핑몰을 구축하고 싶지만 여러 제약으로 인해 어려움을 겪는 고객들의 모습을 보고, 쇼핑몰 솔루션 분야로까지 진출하게 되었습니다.

기본 인프라 제공에서 한 단계 진보된 서비스를 함으로써 고객들이 쉽게 쇼핑몰 운영에 접근할 수 있도록 하기 위함이었습니다.
지금은 쇼핑몰 등 e-비즈니스 사업자들이 인터넷 공간상에서 효율적인 마케팅을 펼칠 수 있도록 ‘온라인 마케팅 컨설팅’ 영역으로까지 사업 분야를 확대했습니다.

이처럼 카페24의 사업 분야는 모두 ‘기술’과 ‘고객’에서 비롯되었습니다. 보다 고객의 니즈(Needs)를 충족할 수 있는 분야에, 심플렉스인터넷의 기술력을 결합함으로써 다양한 사업분야로 확장하고 있는 것입니다.

99년 창업 이래 매년 고속성장을 하고 있다는데. 최근 근황과 회원수가 궁금합니다.  
심플렉스인터넷은 설립 후 꾸준히 성장세를 유지하고 있습니다. 지난해에는 약 122억원의 매출을 달성하였고, 올해는 약 220억원를 예상하고 있습니다.

현재 카페24 쇼핑몰 솔루션 이용자 수는 25만 명 정도로 집계됩니다.
(카페24 호스팅 사용자 수는 카페24 쇼핑몰 솔루션과 별도로 약 24만명)
이 중 전체 온라인 쇼핑몰 시장을 봤을 때 패션관련 품목이 차지하는 비중은 약 20%에 육박합니다.

카페24 쇼핑몰 솔루션 이용자 역시 패션 분야로 대부분 창업을 하는 것으로 분석되고 있습니다. 그 비중은 약 70~80% 정도 입니다. 최근에도 신규 서비스 고객이 계속해서 증가하는 추세며 이 같은 실적을 바탕으로 기존 고객에 대한 서비스 강화 및 신규 고객을 확보하기 위한 전략으로 ‘서비스 확장’을 꾀하고 있습니다.

무엇보다 기존 고객의 기대와 욕구에 최대한 부응할 수 있도록 보다 다양한 서비스를 통해 고객의 선택 폭을 넓힐 예정입니다.

심플렉스의 가장 큰 매력은 무엇입니까. 
‘기술력’과 고객의 편의성을 갖춘 ‘서비스’를 제공하고 있다는 측면에서 높은 점수를 주시는 것 같습니다. 쇼핑몰 솔루션의 경우 타사 대비 월등히 많은 서비스 기능을 제공하고 있고, 쇼핑몰 구축에서부터 운영·마케팅 컨설팅까지 한 번에 해결할 수 있다는 편의성이 가장 큰 장점이 아닐까 합니다.

실제로 카페24 쇼핑몰 솔루션을 통해 쇼핑몰을 창업한 기존 고객들이, 어느 정도 사업궤도에 오른 후 카페24 마케팅센터를 통해 본격적인 마케팅을 위해 컨설팅을 받고 있습니다.

이처럼 카페24는 고객들이 비즈니스에 열중할 수 있도록 다양한 서비스를 원-스톱(One-Stop)으로 제공하고 있습니다.

심플렉스인터넷의 성장 배경이 궁금합니다.  
전체 호스팅 시장 규모를 수치화해서 말하기는 힘듭니다. 현재 호스팅 시장은 규모 자체는 크다고 말할 수 없고 기본적인 인프라가 어느 정도 갖춰진 시기라고 판단됩니다.

하지만 인프라 구축 후 여러 기술과 서비스를 통해 시장은 확대될 수 있다고 생각합니다.

따라서 호스팅 업체의 경우 가장 큰 밑천은 ‘기술적 우위’가 아닐까 합니다. 그런 의미에서 심플렉스인터넷은 빼어난 인재들과 오랜 경험에서 비롯된 기술력이 큰 자산이 되고 있으며, 더불어 호스팅 시장을 확대할 만한 능력을 지닌 회사로 심플렉스 바로 그 중심에 서 있습니다. 

실제로 올해만 국내 최초로 ‘SSD 호스팅’ 서비스를 실시하는 한편 8-way 기반 호스팅, 다양한 DB 호스팅, 게시판 스팸필터 서비스 등을 통해 앞선 기술력을 증명하였습니다. 쇼핑몰 솔루션에서도 한층 업그레이드된 ‘원클릭 서비스’를 통해 고객을 위한 서비스를 마련하였습니다.
이렇듯 심플렉스인터넷은 고객을 위한기술을 추구함으로써 호스팅 시장을 이끌어 가는데 앞장 서고 있습니다.

심플렉스인터넷의 기업 문화가 이슈로 자주 부각되고 있습니다.  
심플렉스인터넷은 대리, 과장, 부장 등의 직급을 없애고, 전 직원이 자유롭게 의견을 개진하고 능동적으로 업무를 추진할 수 있는 수평적 구조를 선택하였습니다.
이로써 업무 효율성 제고는 물론 직원들의 창의력 발휘, 자율적인 업무 분위기조성이 가능토록 합니다.

또 회사는 복지제도를 강화하여 직원들의 만족도를 높이고자 노력하고 있습니다. 직원들의 각종 문화생활, 친목활동, 자기계발을 위한 복지기금으로 연간 70만 포인트를 지원하고 있으며, 월 1회 주4일 근무제도 시행하고 있습니다.

특히 네 번째 금요일을 휴무일로 지정하고, 휴가비 10만원도 함께 지원되는 월 1회 주4일 근무제는 직원들의 회사 만족도와 근무 능률이 크게 증가하는 데 기여하고 있습니다.

이러한 심플렉스인터넷의 기업 문화는 직원들의 삶의 질을 높일 뿐만 아니라 나아가 기업 경쟁력을 제고하는데 필요한 제반 사항으로 자리 잡았다고 말씀드릴 수 있습니다.

사업 전략 및 올해 중점을 두고 있는 분야가 있다면.  
우리 회사의 캐치프래이즈는 ‘e-Business 파트너’입니다.
인터넷을 통해 비즈니스를 하고 있는 사람이라면 누구나 파트너로서 함께 한다는 의미가 담겨 있습니다.

그런 의미에서 올해도 카페24는 한 명, 한 명의 파트너의 성공 비즈니스를 함께 이루기 위해 고객들에게 신뢰를 주는 것을 가장 큰 비전이자 계획으로 삼고 있습니다.

따라서 인터넷 비즈니스 중심축에 심플렉스인터넷이 있을 수 있도록 ‘카페24’라는 브랜드를 계속 성장시킬 것이며, 또 이를 위해 온 힘을 다해 노력할 것입니다.
특히 지속적으로 기술을 연구·개발하여, 다양한 서비스를 제공함으로써 차별화된 경쟁력을 확보하는데 중점을 둘 것입니다.

온라인에서의 패션사업에 대한 전망이 궁금합니다.  
각종 통계에서 나타나는 것처럼, 온라인 쇼핑몰 시장은 나날이 확대되고 있습니다. 그 중에서도 패션 관련 쇼핑몰의 성장세가 예사롭지 않습니다.

특히 최근에는 패션 대기업들도 속속 온라인 시장으로 진출하고 있고 대규모 종합 쇼핑몰들도 너나 할 것 없이 패션 부문의 차별화에 전력투구하고 있습니다.
이렇게 규모와 체계적인 시스템을 갖춘 사업자들이 전략적으로 접근하면서 온라인 패션사업의 경쟁은 더욱 치열해지고 시장 규모 또한 확대될 것이라고 봅니다.

다각적인 루트로 오프라인 브랜드들의 온라인 시장 공략이 진행될 것이고, 이로써 중소 규모의 온라인 쇼핑몰들도 더욱 양질의 제품과 전략적인 마케팅으로 경쟁력 확보에 나설 것입니다.

온라인 시장의 성장세는 당분간 지속될 것이고 패션 분야에서도 소비자들의 구매행태가 오프라인에서 온라인으로 상당 부분 전환되고 있어 규모적인 측면에서는 전망이 아주 밝다고 할 수 있습니다.

패션 쇼핑몰은 시장 경쟁이 치열한 것이 사실이지만 이러한 경쟁이 오히려 시장 규모를 키울 수 있었던 계기가 되었다고 생각합니다.

운영·마케팅·서비스 등 측면에서 전문성을 키우고 차별화한다면 오히려 경쟁력을 갖춰 ‘파이’를 확보할 수 있을 것입니다.

전체운영을 놓고 볼 때 향후 보완할 점이 있다면.  
설립 9주년을 맞은 심플렉스인터넷은 현재 다년간 쌓은 노하우와 앞선 기술력을 보유하고, 인프라나 가격 경쟁력, 시장점유율 면에서 우위를 차지하고 있습니다. 

인프라 구축이 어느 정도 완료되었으므로, 이제는 수요자의 입장에서 철저하게 조사하고 체계적으로 분석하여 더욱 안정화된 서비스 제공과 앞서가는 신기술, 신규 서비스 출시에 전력투구할 것입니다.

이를 위해 R&D와 인력충원 등에 투자를 지속적으로 확대하고 기술개발과 고객지원, 마케팅 등 전방위적으로 전문성을 강화해 나갈 것입니다.

대표님의 경영철학은.   신뢰입니다.
창의적 조직을 구축하고 경영성과를 도출하기 위해서는 신뢰가 중요합니다. 다양한 인재들이 기업의 경영이념과 핵심 가치를 충분히 체화할 수 있는 신뢰가 밑바탕이 되어야, 고객으로부터 신뢰를 얻을 수 있다고 생각합니다.

고객이 특정 회사의 브랜드를 신뢰한다는 것은 서비스는 물론 회사를 믿는다는 의미입니다.

조직에 대한 신뢰가 높다면 직원들은 스스로 조직이 제시하는 비전 달성을 위해 동참하게 될 것이고, 조직이 추구하는 고객으로부터 신뢰를 얻을 수 있을 것입니다.

따라서 저는 신뢰가 기업의 경쟁력을 제고하는 가장 강력한 수단이라고 확신합니다.

심플렉스인터넷의 직원들은 열린 마음으로 서로의 말에 귀 기울이고 서로의 눈높이를 맞추며 신뢰를 쌓아가고 있습니다. 직원들의 이러한 신뢰는 나아가 조직에 대한 신뢰, 고객에 대한 신뢰로 이어져 기업이 성장하는데 큰 밑거름이 되고 있습니다.

심플렉스인터넷의 CEO로서 개인적인 목표가 있다면.  
심플렉스인터넷을 기술과 트렌드의 변화 흐름을 정확히 판단하고 대응할 수 있는 기업으로 성장시키고 싶습니다.

무리하게 새로운 영역을 개척하는 것보다는 미래수익성이 높은 아이템을 선별하고 전문성 강화를 통해 안정적인 수익 창출 기반을 마련하는데 최우선을 둘 것입니다.

최근 해외 진출에 대한 소문은.  
국내에서 축적한 기술과 노하우를 바탕으로 경쟁력을 갖추면 해외진출의 여지도 무궁무진할 것입니다. 이와 함께 해외사업도 고려하는 전향적 모습을 보여줄 것입니다.

중국이라는 시장 자체가 한국과는 상황이 다르고 법적 절차를 비롯해 사전에 고려해야 할 부분이 많아 다각적인 분석 후 보다 신중하게 진행하려 하고 있습니다.

중국시장 진출은 새로운 시장을 개척함과 동시에 카페24의 미래 성장 동력을 확보한다는 차원에서 의미를 가집니다. 중국시장 진출에 대해서는 아직 정확한 일정을 정하진 못하지만 지금 현재 밑그림을 그리고 있는 중 입니다.


profile
나이 41세(1968년생) | 출신학교 포스텍(포항공대) 물리학과 졸업
경력 한국코트렐 연구원 | 한국네트워크비즈니스컨설팅 설립
99년 5월 심플렉스인터넷(주) 설립




쇼핑몰제작 홈페이지제작 마케팅 쇼핑몰창업
국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com/

Posted by 문땡글이

쇼핑몰, 잊지못할 첫 인상이 중요
현대 사회 사람들은 언제나, 무척 바쁘다.

요즘 사람들이 가장 참기 힘든 시간이 인터넷창이 빨리 안 뜰 때라고 하던데, 아래는 그를 증명하는 로그분석 도표들(메이크샵 에이스카운터)이다.

쇼핑몰 로그분석



도표를 보면 얼마나 많은 방문자들이 사이트에 접속한 후 짧은 시간동안 머무는지를 예측할 수 있다.

짧은 시간 머문다는 것은 체류시간이 짧다는 의미이며, 체류시간이 짧다는 것은 상품구매를 위한 정보 수집을 하지 않았다는 뜻이다.

즉 쇼핑몰 운영자라면 방문자가 사이트를 끄기 전에 한 번 더 창을 끌 것인가 말 것인가 고민할 수 있고, 단 1초라도 더 체류할 수 있게 할 ‘볼거리’를 제공해야 한다는 의미이기도 하다.

바쁜 현대 사회 사람들이 아무 이유 없이 한 사이트에 오래 머무르지 않는다.
보통의 체류시간이 짧다보니, 방문자의 호감정도는 전체적으로 낮을 수밖에 없다.

전체 방문자 중 오늘 처음 왔다고 밝히는 1회방문자 비율이 전체의 65% 에 달한다.
 
즉 두 번 다시 안 오는 사람들이 재방문해 오는 사람들보다 2배에 가까운 것.
 
두 번 다시 안 올 확률이 높은 방문자에게 1분 이내에 내가 하고픈 메시지를 빠르고 확실히 어필해줄 ‘첫인상’이 필요하다.

아래 도표는 첫 구매 매출과, 2-3회 재방문구매의 매출 비교추이다.

쇼핑몰 로그분석


구매금액을 따져보기 전에 그냥 막대그래프 차이만 보더라도 첫 방문시 구매량이 재방문시의 구매량보다 얼마나많은 지 알 수 있다.

이 그래프를 봐도 첫인상을 왜 강력히 어필해야 하는지 알 수 있다.

보면 볼수록 예쁘고 빠져드는 사이트를 구축하는 것은 실패의 지름길이다.
 
한눈에 예쁘고, 단숨에 빠져드는 사이트여야 한다.

사람들은 인내하지 않는다는 것을 명심하길.

쇼핑몰 로그분석


윗 도표는 좀 더 구체적인, 구매까지 걸린 시간이다.
 
30분 이내에 구매한다는 사람들이 전체의 70%. 30분을 넘는 사람들이 있고, 그 중 몇몇은 2-3 시간 넘게 뒤져본다는 의미인데 (사실 2~3 시간 뒤져본다고 나온 것은 계속 화면을 뒤졌다는 얘기가 아니라, 그냥 창이 꺼지지 않았다는 정도로 해석하면 맞다)위 그래프의 결론은 “1분 이내, 첫인상이 모든 매출의 70% 를 좌우한다”고 내릴 수 있겠다.

내 사이트 인덱스에서 보이는 화면이 무슨 내용을 신속히 어필하고 있는지 체크해보시길. 방문자 대비 구매전환률이 낮다면, 반드시 첫인상에서 문제점이 있다.

글 : 김수연
인터넷마케팅 디지털피쉬 (www.digitalfish.co.kr) 정보책임자
다음카페 내가게 홍보책임자 및 홍보강사
비법닷컴 eBiz 분야 홍보마스터
마케팅스쿨 운영
한국PR협회 KPRA 인증회원
경북농업경영대학 겸임교수



쇼핑몰창업 홈페이지제작 홍보마케팅 창업정보
국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com/

Posted by 문땡글이

[쇼핑몰제작]  쇼핑몰에 컨셉을 입혀라!

필자는 쇼핑몰 기획과 프로모션이라는 주제로 창업 강의를 하고 있다. 얼마 전, 강의요청을 받아 강의를 시작하려고 하는데 예비창업자가 너무나 진지한 태도로 강의듣기 전에 궁금한 부분이 있다며 많은 질문들을 쏟아냈다.

‘쇼핑몰 기획을 왜 배워야 하는지?’ ‘창업비용을 줄이기 위해서 이미 제작된 사이트를 저렴하게 구매해서 빠르게 창업하는게 좋은지?’ 등 순간적으로 당연히 ‘이것도 모르는 분이 어떻게 창업을 하겠다는 거지?’ 라고 반문하고 싶었지만, 그 자리에 앉아 있었던 많은 교육생들 중에 일부는 그런 생각을 하고 있을 것이라는 생각이 들었다.

이는 아마도 초보·예비창업자들은 아이템만 있다면 싼 가격에 쇼핑몰 사이트를 하나 만들고, 여기에 상품 사진을 촬영하고, 상품등록을 위해 포토샵을 익히고, 결제시스템 준비와 관리자 프로그램을 마스터하고, 각종 포털에 도메인을 등록하면 장사준비 완료라고 생각하기 때문일 것이다.

고객이 구매하고자 하는 상품을 키워드로 찾아서 사이트에 접속했을 때 사이트가 예쁘면 많은 호감을 보이는 건 사실이다. 하지만 찾는 상품이 없을 경우에는 바로 나가버리는 게 고객들의 반응이다.

한방다이어트의 제품을 판매하는 두 쇼핑몰을 비교하여 설명하고자 한다.

두 사이트를 동시에 방문한 고객은 ‘운산몰(www.woonsanmall.com)’을 보면서 ‘예쁘고 편안하다. 차 한잔 마셨으면 좋겠다’ 등의 느낌을 받게 된다. 이럴 경우 이 사이트의 주력상품은 한방차로 한정되고 만다.  ‘운산몰’의 주력상품은 차가 아닌 다이어트 제품이기 때문에 다이어트 상품이 당연히 눈에 띄어야 한다.

때문에 고객의 입장에서는 허브차나 한방차를 파는 쇼핑몰이라 생각이 들어서 한방차 위주로 구매를 하게 되거나 아니면 곧바로 빠져나가는 고객이 많을 것이다.

사용자 삽입 이미지

주력제품과 보조제품이 뒤바뀐 한방쇼핑몰 운산몰



이에 반해 아래쪽의 ‘백장생(www.100js.com)’이라는 쇼핑몰을 방문한 고객은 다이어트 제품이 주력이라는 생각을 받게 될 것이다. 이 쇼핑몰은 판매자가 파는 상품을 메인에 강조하고 주력상품의 카피나 카테고리도 미용과 건강상품, 한방차로 설정하였다.

사용자 삽입 이미지

주력제품을 메인에 강조한 한방다이어트쇼핑몰 백장생


이것이 쇼핑몰창업의 가장 기본인 컨셉(개념잡기)의 중요성이다. 컨셉이 있는 쇼핑몰은 클릭을 유도하는 상품이나 카피 등의 유혹을 통해 매출로 상승하기 때문이다.

컨셉 없이 창업을 하면 광고비를 아무리 많이 들여서 홍보를 한다고 해도 방문만 많은 홍보용 쇼핑몰로 전략하고 말것이다. 창업자들은 홍보용이 아닌 매출용 쇼핑몰로 만들기 위해서 오늘도 고객이 방문하는 목적을 분석, 사이트를 방문했을 때 한눈에 고객을 유혹시켜야 한다.


글 : 송현숙
노노스(www.nonosd.com) 대표
한국여성경제인협회 온라인창업 컨설턴트
용인송담대학 경영정보과 인터넷창업 및 마케팅 외래교수
나우앤 컨설턴트



쇼핑몰창업 홈페이지제작 홍보마케팅 창업정보
국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com/

Posted by 나우앤

[홈페이지제작] 웹사이트 유저빌리티 체크 11가지
내 웹사이트, 얼마나 사용하기 쉬운가?


한번 웹 사이트의 고객을 놓치면 영원히 그 고객을 잃게 된다. 고객을 놓치는 이유는 여러 가지가 있다.
오류가 있거나 모호한 내비게이션, 나쁜 인터페이스 디자인, 느린 다운로드 속도, 호환성 없는 기술, 등등.

어떻게 하면 좋을까? 해답은 간단하다.
사이트 방문자가 무엇을 하기 원하는가를 알아 내라. 방문자의 니즈를 빨리 알면 알수록 더 좋다.

사이트를 운영 중인데 여전히 왜 로그가 당신의 기대에 못 미치는가를 모르고 있다면 사이트의 유저빌리티(usability)를 테스트해보라. 테스트 방법 중 한가지는 모조 사이트를 만들고 사이트에서 사용자들이 실행할 수 있는 다양한 시나리오를 테스트해 보는 것이다.

유저빌리티는 디자인 프로세스의 통합적인 구성 요소다. 유저빌리티는 좋은 디자인으로 한정하지 말아야 한다. 오히려 유저빌리티는 높은 기능성과 사용하기 쉬운 사이트를 만들기 위한 좋은 디자인의 능력을 향상 시켜야 한다. 사이트를 개설하기 전에 테스트하라.

1. 사이트의 목적

사이트가 목적을 제대로 수행하고 있나?
목표 고객이 원하는 바를 전달하도록 디자인됐나?

2. 사이트의 능력

효율적인가?
직관적인가?
전체적으로 일관성있게 움직이고 그렇게 보이는가?
사용자가 충분히 통제하고 있고 편안하다는 느낌을 주는가?

3. 브랜딩

웹 사이트의 첫 페이지가 당신 비즈니스의 성격을 반영하고 있는가?
브랜딩이 사이트의 모든 페이지에 나타나는가?
페이지 우측과 마찬가지로 페이지 상단의 주목할 만한 위치에 브랜딩이 표현되는가?
홈페이지로 링크를 거는 것처럼 브랜딩이 내비게이션의 한 부분처럼 작동하는가?

4. 내비게이션

사이트의 주요 내비게이션이 스크롤하기 전의 눈에 띄는 위치에 나타나는가?
사이트 내비게이션이 이미지 형식인가? 그렇다면 페이지 내에 텍스트 형식의 내비게이션도 고려해 보라.
이미지 링크에 ALT 태그를 사용하고 있는가?
내비게이션 툴에 자바스크립트를 사용하고 있다면 텍스트 링크도 함께 제공하고 있는가?
사이트에 데드 링크는 없는가? 데드 링크를 확인하고 즉시 제거하라.
사이트 전체를 내비게이션하지 않고 원하는 정보로 직접 찾아가기를 원하는 사용자들을 위해 사이트맵이나 서치 엔진을 제공하는가?
내비게이션 툴 및 시스템이 사이트 전체에 걸쳐 일관성 있는가?
사용자에게 앞뒤로 이동할 수 있도록 사이트 내의 정확한 위치 정보를 제공하고 있는가?
링크가 사용자에게 어디로 데려갈 지 정확하게 말하고 있는가?

5. 이미지

콘텐츠와 관련있는 맥락에서 이미지를 사용하고 있는가?
이미지 파일의 사이즈가 최적화 되어 있는가?
큰 이미지를 작은 이미지로 자르는 것을 고려하라; 이렇게 하면 다운로드 속도를 빠르게 할 수 있다.
이미지를 설명할 필요가 있다면 이미지에 대한 설명이 명확한가?
이미지에 ALT 태그를 사용하고 있는가?

6. 애니메이션

특별한 목적이 없다면 연속적으로 회전하는 애니메이션을 사용하지 마라. 주의를 분산시킨다.
필수불가결한 상황에서만 플래시 애니메이션을 사용하라. 다운로드 시간도 오래 걸릴뿐더러 플러그인도 필요하다.

7. 스폰서 및 광고

사이트에 배너가 있다면 파일 사이즈 최적화를 고려해 보았는가? 배너는 다운로드 속도를 느리게 한다.
배너의 위치는 어디인가? 사이트에서 전자상거래가 가능하다면 페이지의 우측 상단이나 우측 하단에 배너를 위치시켜라.
(연구에 따르면 페이지 우측 스크롤바에 가까운 위치에서 가장 높은 클릭율을 얻을 수 있다)

8. 콘텐츠

콘텐츠가 페이지나 사이트의 맥락과 일치하는가?
콘텐츠가 간략하고 정확한가? 이야기 나열은 피하라. 적절한 정보만을 위해 사용자들은 콘텐츠를 훑어 본다.
콘텐츠가 관련있는 정보를 제공하는 문서나 웹 사이트로 크로스 링크되어 있는가?
콘텐츠를 분리하기 위해 수평선 규칙을 피하라. 페이지의 유용한 콘텐츠가 끝난다고 해석될 수 있다.

9. 기술

사이트의 쌍방향적인 요소가 목표 고객이 사용하는 브라우저와 호환성이 있는가? 그렇지 않으면 사용자가 그것을 사용하기 위해 플러그인이나 소프트웨어를 다운로드 받아야 하는가?(사용자들은 추가적으로 필요한 노력을 싫어한다)
그런 기술의 사용이 중요하다면 사용자들에게 필요성과 중요성을 고지시켰는가?

10. 전체적인 인터페이스

사이트의 필요 및 취향과 색상이 조화를 이루면서 사이트의 인터페이스가 편안한가?
레이아웃이 시각을 즐겁게 하기 위해 흰색의 여백을 많이 포함하고 있는가?
레이아웃과 색상과 관련해 사이트 전체적으로 인터페이스가 일관성 있는가?
상이한 플랫폼과 브라우저에서도 사이트가 동일하게 보이는가? 그렇지 않다면 최대한 많은 브라우저와 운영 시스템에서 일관성 있게 보이도록 코드를 수정하라.

11. 피드백

고객의 입장에서 적절한 피드백 메커니즘을 제공하고 있는가? 예를 들어 사용자가 폼을 제출하면 수용 여부에 대해 알 수 있는가?
고객이 칭찬이라든지 제안을 할 수 있는 기회가 있는가? 그리고 사이트 또는 콘텐츠와 관련한 어떤 주제에 대해서도 질문할 수 있는 기회를 제공하고 있는가?
고객이 운영자의 이메일 주소, 우편번호, 전화 및 팩스 번호 등을 찾을 수 있는가?


※ 참조 :유저빌리티(usability) 체크리스트 11가지 /  저자: Suneet Kheterpal

물론 사이트의 유저빌리티를 테스트할 때 더 많은 항목을 이 체크리스트에 추가할 수 있다.
이 체크리스트를 가이드로 사용하면 사이트의 기능성과 사용자들이 사이트를 편하게 느끼는가에 대한 개략적인 그림을 얻을 수 있다.


쇼핑몰창업 홈페이지제작 홍보마케팅 창업정보
국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com/

Posted by 문땡글이
[홈페이지제작] 아이템을 한 라인에 표시하는 방법 <li 태그>

<li> 태그의 li는 list item의 약자이다.
각각의 아이템을 <li> 태그를 이용하여 표시하면 기본적으로 각 아이템들은 라인별로 나타난다.
예를 들어 <li> 태그의 디폴트 결과는 다음과 같다.

  • 리스트 아이템 1
  • 리스트 아이템 2
  • 리스트 아이템 3

위 결과에 대한 소스 코드는 다음과 같다.

<ul>
    <li>리스트 아이템 1</li>
    <li>리스트 아이템 2</li>
    <li>리스트 아이템 3</li>
</ul>

수직으로 펼쳐진 이 리스트 아이템을 수평으로 펼치려면 CSS에서의 display 속성을 inline으로 주면 된다.

  • 리스트 아이템 1
  • 리스트 아이템 2
  • 리스트 아이템 3

<style>
li.inline {
  display: inline;
}
</style>

<ul>
    <li class="inline">리스트 아이템 1</li>
    <li class="inline">리스트 아이템 2</li>
    <li class="inline">리스트 아이템 3</li>
</ul>

결과를 보면 알겠지만 display 속성을 inline으로 주면 불렛(bullet) 모양의 list-style-type이 없어진다. 그래서 조금은 허전한 듯 하다. 이런 이유로 수평으로 펼칠 경우 각각의 아이템 사이에 적당한 구분선을 삽입해 주는데 이 부분을 CSS를 이용하여 구현해 보자.

  • 리스트 아이템 1
  • 리스트 아이템 2
  • 리스트 아이템 3

<style>
li.inline2 {
  display: inline;
  padding-left: 9px;
  padding-right: 7px;
  border-right: 1px dotted #D36;
}
 
li.last {
  display: inline;
  padding-left: 9px;
  padding-right: 7px;
  border-right: 0px;
}
</style>

<ul>
    <li class="inline2">리스트 아이템 1</li>
    <li class="inline2">리스트 아이템 2</li>
    <li class="last">리스트 아이템 3</li>
</ul>

여기서 눈여겨 볼 것은 마지막 리스트 아이템의 스타일 클래스를 별도로 지정해준 부분이다. 이렇게 하는 이유는 마지막 리스트 아이템 오른 쪽 옆에는 구분선이 나오면 안돼기 때문이다.

물론 구분선을 다음과 같이 조금 더 굵게 줄 수 도 있을 것이다.

  • 리스트 아이템 1
  • 리스트 아이템 2
  • 리스트 아이템 3

<style>
li.inline3 {
  display: inline;
  padding-left: 9px;
  padding-right: 7px;
  border-right: 2px solid #D36;
}
 
li.last {
  display: inline;
  padding-left: 9px;
  padding-right: 7px;
  border-right: 0px;
}
</style>

<ul>
    <li class="inline3">리스트 아이템 1</li>
    <li class="inline3">리스트 아이템 2</li>
    <li class="last">리스트 아이템 3</li>
</ul>

아니면 다음과 같이 각각의 리스트 아이템에 경계선을 표시하여 박스 형태로 나타나게 할 수도 있을 것이다.

  • 리스트 아이템 1
  • 리스트 아이템 2
  • 리스트 아이템 3

위 결과에 대한 소스 코드는 다음과 같다.

<style>
li.inline4 {
  display: inline;
  padding: 9px;
  border: 1px solid #D36;
  margin: 1px;
}
</style>

<ul>
    <li class="inline4">리스트 아이템 1</li>
    <li class="inline4">리스트 아이템 2</li>
    <li class="inline4">리스트 아이템 3</li>
</ul>



쇼핑몰창업 홈페이지제작 홍보마케팅 창업정보
국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com/



Posted by 문땡글이
[홈페이지제작] HTML 태그 기초8- IMG 태그

HTML 문서에 그림을 넣기 위한 element로 시작 태그만 있다.

<IMG src = "/images/kic.gif" alt = "코리아인터넷닷컴">
<IMG src = "/images/kic.gif" width = 150 height = 50>
<IMG src = "/images/kic.gif" border = 5>
<IMG src = "/images/kic.gif" hspace = 2 vspace = 5>그림과 오른쪽 문자열 사이의 여백은 2픽셀이고, 아랫쪽 문자열 사이의 여백은 5픽셀이다.
<A href = "/index.asp"><IMG src = "/images/kic.gif" border = 0"></A>

실행결과

코리아인터넷닷컴






그림과 오른쪽 문자열 사이의 여백은 2픽셀이고, 아랫쪽 문자열 사이의 여백은 5픽셀이다.





사용할 수 있는 속성은 다음과 같다:

속성


src = "URL"

삽입할 그림 파일의
경로를 써 준다. 없어서는 안되는 속성이다.

alt = "문자열"

그림을 표시하지 못하는 브라우저를 위해 간단한 그림의 설명(alternate text)을 붙여 준다. 익스플로러나 넷스케이프같은 그래픽 브라우저에서도 사용자가 그림을 불어오지 않도록 설정하거나 멈춤 단추를 눌러서 그림이 들어오기 전에 전송을 중단하면, 그림이 있어야 할 자리에 그림 표시와 함께 alt 속성 값이 나타난다. 4.0 버젼의 브라우저에서는 alt 속성의 값을 툴팁으로 보여주기도 한다.
title과 alt 속성을 동시에 썼을 때는 title 속성의 값이 툴팁으로 나온다.

longdesc = "URL"

alt보다 긴 설명(long description)을 붙일 때 설명이 들어있는 문서의 URL을 써 준다.

ismap

이미지맵이 서버 맵일 때 넣는 속성이다.

usemap = "#맵이름"

이미지맵이 클라이언트 사이드 맵일 때 사용할 맵 파일의 이름을 확장자없이 써 준다.

align = top | middle | bottom | left | right

이미지와 이미지를 둘러싼 문자열 사이의 정렬 방식을 정한다. top이면 이미지의 윗쪽과 문자열의 윗쪽이 맞춰진다. bottom이 기본값이다.

width = 숫자

이미지의 폭을 정한다. 단위는 픽셀이다.

height = 숫자

이미지의 높이를 정한다. 단위는 픽셀이다. height와 width 값을 실제 이미지 크기보다 작게 준다고 해서 그림 파일의 크기가 줄어드는 것은 아니다. 그림 파일의 크기를 줄이기 위해서는 그래픽 프로그램을 이용해 실제 크기를 줄이거나 색 수를 줄여야 한다.
width와 height 값을 실제 값으로 주게 되면, 브라우저는 아직 그림 파일을 다 불러오지 못했더라도 그 크기만큼 공간을 비워두고, 나머지 문자열을 먼저 배열하게 된다.

border = 숫자

이미지의 테두리 선 굵기를 정한다. 단위는 픽셀이다. 그림에 링크를 걸었을 때는 그림의 주위에 파란 색 테두리선이 나타나는데, 이 선을 없애려면 border 값을 0으로 주면 된다.

hspace = 숫자

이미지와 이미지의 좌우에 나타나는 문자열과의 사이에 있는 여백의 두께이다. 단위는 픽셀이다.

vspace = 숫자

이미지와 이미지의 상하에 나타나는 문자열과의 사이에 있는 여백의 두께이다. 단위는 픽셀이다.




쇼핑몰창업 홈페이지제작 홍보마케팅 창업정보
국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com/
Posted by 문땡글이
[홈페이지제작] HTML 태그 기초 7-HR 태그

웹 페이지 상에 단락과 단락을 구분하기 위해 HR 태그를 사용하곤 한다. <HR> 태그의 HR은 Horizontal Reference의 약자이다. 가장 간단히 <HR> 태그만 사용하면 다음과 같은 수평선이 생겨난다.

이제 이 수평선의 폭을 조정해 보도록 하자.


<HR WIDTH="60%">

폭을 줄이는 방법은 간단하다. HR태그의 WIDTH 속성에 적당한 값을 주면 된다. 만일 이 값을 위와 같이 % 단위로 주면 페이지 넓이의 상대적인 비율로 그 폭을 결정하게 된다.

자, 이번엔 이 수평선의 높이를 조정해 보도록 하자.







위 결과에 대한 소스 코드는 다음과 같다. 높이를 조정하기 위해서는 HR 태그의 SIZE 속성에 1 ~ 6 사이의 값을 넣어주면 된다.

<HR width="80%" SIZE=1>
<HR width="80%" SIZE=2>
<HR width="80%" SIZE=3>
<HR width="80%" SIZE=4>
<HR width="80%" SIZE=5>
<HR width="80%" SIZE=6>

이번엔 이 수평선에 정렬 속성을 부여한 결과를 보자.





위 결과에 대한 소스 코드는 다음과 같다. HR 태그에 ALIGN 속성에 left, right, center 중 하나의 값을 설정하면 된다.

<HR width="60%" ALIGN="LEFT">
<HR width="60%" ALIGN="RIGHT">
<HR width="60%" ALIGN="LEFT">
<HR width="60%" ALIGN="RIGHT">

이번엔 수평선에서 음영 속성을 제거해 보자. 결과는 다음과 같다.


위 결과에 대한 소스 코드는 다음과 같다. 미세한 차이이긴 하지만 자세히 보면 음영이 없다.

<HR width="60%" NOSHADE>

이번엔 이 수평선에 색상을 넣어 보자. 결과는 다음과 같다.




위 결과에 대한 소스 코드는 다음과 같다.

<HR width="60%" color="yellow">
<HR width="60%" color="purple">
<HR width="60%" color="green">

HR 태그를 적용할 수 있는 예는 다양하다. 한 예로 다음과 같이 바닥글에 저자 소개라든지, 각주 처리 등에 이 수평선을 이용해볼 수 있을 것이다.

HR 태그 사용 예1:


<저자>찰스 커넬(Charles Connell)은 CHC-3 컨설팅의 대표로 재직 중입니다. 또한 커넬은 보스턴 대학에서 컴퓨터 과학을 가르치고 있으며, 각 잡지와 언론에 컴퓨터 관련 기사를 제공하고 있습니다.

위 결과에 대한 소스 코드는 다음과 같다:

<HR width="50%" SIZE=1 color="#D03636" align="left">
<FONT color=#800000><b><저자></b></FONT><font color="gray">찰스 커넬(Charles Connell)은 CHC-3 컨설팅의 대표로 재직 중입니다. 또한 커넬은 보스턴 대학에서 컴퓨터 과학을 가르치고 있으며, 각 잡지와 언론에 컴퓨터 관련 기사를 제공하고 있습니다.</font>

HR 태그 사용 예2:


<저자>찰스 커넬(Charles Connell)은 CHC-3 컨설팅의 대표로 재직 중입니다. 또한 커넬은 보스턴 대학에서 컴퓨터 과학을 가르치고 있으며, 각 잡지와 언론에 컴퓨터 관련 기사를 제공하고 있습니다.

위 결과에 대한 소스 코드는 다음과 같다:

<HR width="40%" SIZE=4 color="GOLD" align="left">
<FONT color=#800000><b><저자></b></FONT><font color="gray">찰스 커넬(Charles Connell)은 CHC-3 컨설팅의 대표로 재직 중입니다. 또한 커넬은 보스턴 대학에서 컴퓨터 과학을 가르치고 있으며, 각 잡지와 언론에 컴퓨터 관련 기사를 제공하고 있습니다.</font>





쇼핑몰창업 홈페이지제작 홍보마케팅 창업정보
국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com/
Posted by 문땡글이
[홈페이지제작] 이미지와 관련하여 로딩 속도를 올리는 방법

컴퓨터 사양이 점점 더 좋아지고 있는 관계로 로딩 속도를 올리기 위해 등장했던 다양한 팁들도 이젠 한물간 이야기가 되고 있다. 하지만 빠른 로딩 속도를 보여주는 웹 사이트는 여전히 매력적이다. 페이지 로딩 속도와 관련한 요소에는 여러 가지만 있지만 이 시간엔 이미지에 한정지어 요즘에도 로딩 속도에 긍정적인 영향을 줄 수 있는 몇 가지 방법을 살펴보겠다.

다음 페이지의 이미지를 미리 받아두자!

다음 페이지로 연결되어 있는 페이지에서 다음 페이지의 이미지를 미리 받아두면 그 다음 페이지를 읽을 때 캐시 메모리에 저장된 이미지를 읽게 되므로 로딩 속도가 빨라진다.

즉, 현재 페이지의 제일 하단 부에 다음 페이지에 나와 있는 이미지를 미리 다음과 같이 읽어 들인다.

....
....
본문 끝 부분...
....
<img src="next.gif" width="0" height="0">
</body>
</html>

여기서 현제 페이지의 제일 하단부에 위치시키는 것은 사용자가 콘텐츠를 읽는 시간 동안 불러오게 하기 위함이다. 더불어 width와 height는 각각 "0"으로 설정하여 보이지 않게 만든다. 이렇게 하면 다음 페이지를 읽을 때 이미 next.gif를 캐시 메모리에 저장하였으므로 그 만큼의 로딩 속도를 줄일 수가 있다.

캐시 메모리를 적극 이용하자!

"다음 페이지의 이미지를 미리 받아두자!"와 같이 캐시 메모리를 적극 사용하자는 것인데, 사이트 내에서 자주 사용하는 이미지는 여러 폴더에 두지 말고, 즉 서로 다른 페이지에서 동일한 이미지를 두고 매번 그 이미지를 불러 오게 하지 말고, 하나의 특정 폴더에 저장/관리하여 한 페이지에서 읽었으면 다른 페이지에서 그 이미지를 읽을 때 캐시 메모리에서 가지고 올 수 있도록 하자.

여러 사람이 공동 작업을 할 경우 동일한 이미지인데 서로 다른 환경에서 개발하다보니 필요할 때마다 자신이 사용하기 편한 폴더에 저장하여 사용하는 경우가 종종 있다. 이런 이유로 동일한 이미지인데도 서로 다른 폴더에서 읽어들이는 문제가 종종 발생하는 것이다. 그러므로 프로젝트를 진행할 때 그 웹 사이트에서 자주 사용하는 이미지는 별도로 정의하여 특정 폴더에서 공동 관리하는 것이 효과적이다.

이미지의 크기는 반드시 지정해 주자!

img 태그를 사용할 때 width와 height 속성을 반드시 지정해주자. 만일 width와 height 속성을 지정해 주지 않으면 브라우저가 해당 이미지를 읽어오기 위해 width와 height를 계산해야 하기 때문이다. 그러므로 img 태그를 사용할 때는 width와 height 속성을 적어주자.

이미지 사이즈를 줄여주자!

다른 무엇보다 이미지 크기를 줄여주는 것이 좋다. 이미지 크기를 줄이는 가장 효과적인 방법으로는 이미지 색상을 적절히 줄이는 것이다. 굳이 256 색상을 모두 사용할 필요가 없으므로 포토샵을 이용하여 색상 수를 줄여 저장하도록 하자.


쇼핑몰창업 홈페이지제작 홍보마케팅 창업정보
국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com/

Posted by 문땡글이
[홈페이지제작] HTML 태그 기초6- 링크 요소
1. A
2. LINK
3. BASE

1. A
하나의 문서에서 다른 문서로 연결하거나, 그림이나 소리, 동화상, 프로그램 파일 등을 불러올 때 사용하는 element로, 시작과 끝내는 태그로 이루어진다. 화면에는 일반적으로 밑줄 친 파란 글자로 나온다. 이 곳처럼 밑줄을 없애고 싶을 때는 스타일시트를 이용한다.

어디를 눌렀을 때 어디로 갈 것인가를 먼저 생각한다. 누를 곳의 앞 뒤에 와 태그를 각각 넣어주고, 어디로 갈 것인가는 태그 안에 href 속성을 이용해 써 준다. 아래 예를 보면, 조선일보와 같이 다른 사람이 만든 곳으로 이동하고 싶을 때는 http로 시작하는 전체 URL을 모두 써 준다. 그러나, 세 번째 예와 같이 내가 만든 문서나 내 계정 안에 들어있는 파일로 이동하고 싶을 때는 상대경로만을 써 주면 된다.

<A href = "http://www.nowand.com">나우앤닷컴</A>으로 가기
<BR>
저에게 <A href = "mailto:nowand@nowand.com">메일</A>을 보내주세요.

실행결과

나우앤닷컴으로 가기

저에게 메일을 보내주세요.



링크를 하게 되면 언제나 해당 문서의 제일 앞 부분이 화면에 나오게 되는데, 문서의 특정 부분으로 링크를 할 수도 있다.



그림에서와 같이 index.html의 2.연혁을 클릭하면 content.html의 연혁에 대한 내용이 있는 부분이 화면의 제일 앞 쪽에 나오도록 만들어 보자.문서의 제일 앞부분이 앞 쪽에 나오도록 하기 위해서는 앞에서 했던 것과 같이 href 속성을 써서 경로만을 써주면 되었다. 그런데, 문서의 특정 부분이 앞 쪽에 나오도록 하기 위해서는 특정 부분에 따로 이름을 붙여서 브라우저에게 알려주어야 한다. 이 역할을 하는 것이 바로 name 속성이다.

먼저 content.html의 연혁이 시작하는 부분에 <A name=history>라고 써 준다. 이 때 history라는 이름은 임의로 주면 된다. 링크할 때와 달리 특정 부분에 이름만을 붙여 줄 때는 </A>를 쓰지 않는다. 다음에는 index.html에서 링크를 할 때, content.html 중에서 history라는 이름이 붙은 곳으로 넘어가라는 표시를 뭔가 해주어야 한다. 이 때는 #표시를 쓴다. Name 속성 대신에 아래 예와 같이 SPAN element를 써서 id를 붙여 주면 똑같이 링크를 걸 수 있다.

<A name = history>2. 연혁 <-- content.html -->
<SPAN id = history>2. 연혁</SPAN> <-- content.html(두 개가 같은 용도로 쓰일 수 있다.) -->

<A href = "content.html#history">2. 연혁</A"> <-- index.html -->

만약, 한 문서 안에 앞 쪽에는 목차가 있고, 문서의 아랫부분에 내용이 나올 때는 같은 문서의 특정부분으로 연결을 할 수 있다. 이 때는 상대경로를 쓸 때 파일 이름도 생략하고 #이름만 써 주면 된다.

<A name = history>2. 연혁 <-- index.html -->

<A href = "#history">2. 연혁</A> <-- index.html -->

사용할 수 있는 속성은 다음과 같다:

속성


href = "URL"

연결된 부분을 마우스로 클릭했을 때, 어디로 갈 것인지를 결정하는 속성이다. 보통 URL이 들어간다.

name = 문자열

문서의 중간이나 끝 등 특정 부분으로 연결하려고 할 때, name 속성을 사용해 이름을 붙여줄 수 있다. href 속성으로 연결을 할 때는 "파일이름#name"처럼 써준다.

target = 프레임이름 | _blank | _top


프레임 안에서 링크할 때 링크된 문서가 어느 프레임에 나타날 것인지를 결정한다. 프레임을 나눌 때 각각의 FRAME element 안에 name 속성을 써서 이름을 주는데, 이 때 사용한 이름을 쓰는 것이다. _blank를 쓰면 새 창이 뜨면서 문서를 보여주고, _top을 쓰면 현재 창 안에서 특정 프레임 크기가 아니라 전체 창 크기로 문서를 보여준다.

type = MIMETYPE

링크하는 대상의 MIME 형식을 써 준다. MIME 형식이란 파일들을 7가지 그룹으로 분류하고, 각각 하위 형식을 정의한 것으로, 예를 들어 HTML 문서의 MIME 형식은 text/html이 된다. Text 외에 application, audio, image, message, video 등이 있다.

rel = LINKTYPE

현재 문서와 링크하는 문서와의 관계를 나타낸다. LINKTYPE에 들어갈 수 있는 값은 아래와 같다.



rev = LINKTYPE

링크하는 문서와 현재 문서와의 관계를 나타낸다. Rel과는 반대의 의미라고 생각하면 된다.

charset = CHARSET

링크하는 문서의 언어 코드를 써 준다.
http://www.iana.org/assignments/character-sets에 가면 전체 코드 목록을 볼 수 있다.


2. LINK
현재 문서와 다른 문서와의 관계를 나타내는 element로 반드시 HEAD 안에 들어가며, 시작 태그로만 이루어 진다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
    <TITLE>Chapter 2</TITLE>
    <LINK rel="Index" href="../index.html">
    <LINK rel="Next" href="Chapter3.html">
    <LINK rel="Prev" href="Chapter1.html">
</HEAD>
</HTML>

외부 스타일시트를 삽입할 때도 사용한다.


3. BASE
앞서서 A element를 이용해 다른 문서로 링크할 때 href 속성을 써서 해당 문서의 상대경로나 절대경로를 쓴다고 했었다. 상대경로를 쓸 경우에 절대경로는 어떻게 되는지를 보여주는 것이 BASE element의 역할이다. BASE element는 시작 태그로만 이루어지며, HEAD 안에 쓴다.

아래 예를 보자. 현재 만들고 있는 문서가 index.html인데, ..이 있으므로 한 디렉토리 위로 올라가면 nowand.com이 된다. 그 아래에 images디렉토리 밑에 있는 web1.gif 파일이라는 뜻이므로, ../images/web1.gif 파일의 절대 경로는 http://www.nowand.com/images/web1.gif가 된다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
    <HEAD>
        <TITLE>BASE</TITLE>
        <BASE href="http://www.nowand.com/htm/default.htm">
    </HEAD>
    <BODY>
        <A href="../images/web1.gif">웹개발</A>
    </BODY>
</HTML>




쇼핑몰 홈페이지 제작 홍보 마케팅 창업정보
국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com/
Posted by 문땡글이
[홈페이지제작] HTML 태그 기초5-2 : 표(TABLE) 요소

표를 만들 때 사용하는 element로 시작과 끝내는 태그로 이루어진다.


1. TABLE 
2. TR 
3. TH, TD 
4. CAPTION 
5. THEAD, TFOOT, TBODY 
6. COLGROUP, COL
 


4. CAPTION

CAPTION은 표의 제목을 붙이는 element로, 시작과 끝내는 태그로 이루어진다. <TABLE> 바로 다음에 한 번만 넣는다.

<TABLE border=1 width = 80%>
<CAPTION>나의 표</CAPTION>
<TR>
    <TD>1행 1번 셀
    <TD>1행 2번 셀
<TR>
    <TD colspan = 2>2행 1번 셀
</TABLE>

실행결과
나의 표
1행 1번 셀 1행 2번 셀
2행 1번 셀


 
5. THEAD, TFOOT, TBODY 

여러 개의 행을 하나의 그룹으로 묶어주는 역할을 하는 element들이다. THEAD는 표의 머리글에 해당하는 열들의 묶음이고, TFOOT은 표의 바닥글에 해당하는 열들의 묶음이며, TBODY는 본문에 해당하는 열들의 묶음이라고 할 수 있다. 시작 태그는 반드시 써야 하지만, 끝내는 태그는 생략할 수 있다.

TFOOT은 반드시 THEAD 다음에 써야 하며(그래도 TFOOT 부분은 표의 제일 밑에 나온다), THEAD와 TFOOT은 한번씩만 사용할 수 있다. TBODY는 여러번 사용 가능하다.
여러 행을 하나의 그룹으로 묶어 놓으면 특정 그룹에만 특정 스타일을 적용할 수 있어 편리하다.

THEAD, TFOOT, TBODY를 사용할 경우에는 최소한 하나 이상의 TR element가 들어가야 한다.
브라우저에 따라 THEAD와 TFOOT을 쓰면, 표가 여러 장에 걸쳐서 인쇄될 때 페이지마다 THEAD와 TFOOT이 나올 수도 있다.

<HTML>
<HEAD>
<STYLE type = "text/css">
THEAD, TFOOT {background-color : yellow}
TBODY {background-color : blue ; color : white}
</STYLE>
</HEAD>
<BODY>
<TABLE border width = 80%>
<THEAD>
<TR>
    <TD>머리글 1
    <TD>머리글 2
<TFOOT>
    <TD>바닥글 1
    <TD>바닥글 2
<TBODY>
<TR>
    <TD>TBODY 1행 1번 셀
    <TD>TBODY 1행 2번 셀
<TR>
    <TD colspan = 2>TBODY 2행 1번 셀
</TABLE>
</BODY>
</HTML>



6. COLGROUP, COL
 


앞 장에 나왔던 THEAD, TFOOT, TBODY가 여러 개의 행을 하나의 그룹으로 묶어주는 element들이라면, COLGROUP과 COL은 여러 개의 열을 하나의 그룹으로 묶어주는 element들이다. 시작 태그는 반드시 써야하며, 끝내는 태그는 쓰지 않는다.

COLGROUP을 쓰면 행 그룹과 마찬가지로, 열 그룹에도 특정한 스타일을 적용할 수 있다.
COL은 여러 개의 열을 그룹화하지는 않고, 다만 COL 안에 사용한 속성이 COL로 묶여 있는 셀들에 동일하게 적용된다. COLGROUP에 들어 있는 열 중에서 특정 열에만 스타일을 적용하고 싶을 때도 COL을 사용할 수 있다. Id나 class 속성을 쓰면 된다.

THEAD, TFOOT, TBODY, COLGROUP, COL을 사용하면, TABLE의 rules = groups 속성을 사용해 각각의 그룹마다 경계선을 그릴 수 있다.

<TABLE border=2 frame=hsides rules=groups>

<COLGROUP align=left>
<COLGROUP align=right>
    <COL span=2 width=30>
<COLGROUP align=center span=3>
<THEAD>
<TR>
    <TH>이름<TH>남<TH>여<TH>빨강<TH>파랑<TH>노랑
<TBODY>
<TR>
    <TD>갑돌이<TD><TD><TD>X<TD>X<TD>*
<TR>
    <TD>팔복이<TD>X<TD><TD>X<TD>X<TD>X
<TR>
    <TD>몽룡이<TD>X<TD><TD>X<TD>X<TD>X
<TBODY>
<TR>
    <TD>갑순이<TD><TD>X<TD>X<TD>X<TD>X
<TR>
    <TD>셋째딸<TD><TD>X<TD><TD><TD>X
<TR>
    <TD>춘향이<TD><TD>X<TD><TD><TD>X
<TR>
    <TD>향단이<TD><TD>X<TD><TD><TD>X
</TABLE>

사용할 수 있는 속성은 다음과 같다:

속성


span = 숫자

몇 개의 열을 하나의 그룹으로 묶을 것인지를 말해주는 속성이다.

width = 숫자

해당 그룹 안에 들어있는 각 열의 가로 폭을 정한다. 단위는 픽셀이다.





쇼핑몰 홈페이지 제작 홍보 마케팅 창업정보
국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com/
Posted by 문땡글이

티스토리 툴바