제가 쇼핑몰 웹페이지를 만들고 싶은데요.

다른 돈내고 사용하는 웹페이지보다 제가 직접 만들어보고 싶어요.

웹 개발 관련 지식은 거의 모르구요. 웹디자인은 할 줄 알아요.

책봐가면서 하나씩 하나씩 만들고 싶은데 그런 도움이 될만한 책이 있을까요?

시간이 많이 걸리더라도 제가 직접 만들고 싶습니다...0,.0

네이버에 치면 웹페이지 링크나오고...

페이지상에서 로그인 주문관리 이런거 다 할 수 있게요..

학원은 시간상 못다녀요..



답변 드립니다.


코딩에 대한 지식이 없으신 상태에서 쇼핑몰을 독학으로 만드실 생각이시면 상당한 노력과 시간이 필요하실 겁니다.
단순히 웹 제작(보여주기 위한)을 목적으로 한다면 HTML, CSS, Javescript(jquery) 정도만 공부 하셔서 제작이 가능하십니다.
하지만 쇼핑몰 운영에 필요한 엄청난 데이터를 처리/저장(상품게시판, 회원가입, 주문 내역 등) 해야 한다면 좀 더 많은 언어가 필요합니다.
데이터를 가공/처리 하기 위해서 대표적으로 jsp(java)나 php와 같은 언어를 공부하셔야 하고,
데이터를 저장 하기 위해서는 DB(mysql, oracle, mssql 등)언어도 추가로 공부 하셔야 합니다.

정리하자면, 쇼핑몰을 만들기 위해서는 크게
HTML, CSS, Jacascript, Java or php, DB(mysql, oracle, mssql 등)
를 공부하셔야 합니다.

간단히 대표 되는 언어만 열거한 것이며, 각 언어를 공부하다 보면 파생되는 언어들도 많이 있습니다.
예를 들어
CSS : CSS3, LESS, SASS
Javascript _: jquery, ajax, angularjs 등
java : spring, struts 와 같은 프에임워크/ ibatis와같이 DB연동을 위한 언어 / 그 외 tiles, jstl 등등..

우선 독학을 시작하실꺼면 HTML, CSS, Jacascript, Java or php, DB(mysql, oracle, mssql) 이 정도에 관련된 책을 공부하시면 되고요.
요즘은 워낙 정보가 많아서 구지 책을 구매 하지 않고 인터넷 강의를 보시는게 더 도움이 되실 겁니다.
유튜브 같은 곳 위에 언어를 키워드로 검색해서 보시면 됩니다.

책을 보시고 싶다면 어느 책이건 비슷비슷한 내용을 다루기 때문에 어느 책을 보세요라고 지정해 드리는것 보다 직접 서점 가셔서 몇권 살펴 보시고 질문자님이 보시기 편한 책을 사시는게 좋습니다.


어느날 부터인가 여느 때와 같이 열심히 인터넷 서치를 하던 중 알 수 없는 브라우저 광고에 당했다.


보통 프로그램을 설치할 때 항상 악성 프로그램이 추가 설치 되지 않도록 조심조심 하는 편인데... 무엇 때문인지 언제인지 나도 모르게 설치된 이러한 프로그램들.


프로그램 제거 또는 변경에 가 보아도 최근 설치 목록에 설치된 것들도 안보이고.. 이럴때 어떻게 해야 하는가!


아마 필자와 같은 문제를 겪는 사람이 한둘은 아닐 것이다.


이 글을 쓰고있는 와중에도 열심히 떠주시는 광고....(괘씸해서 모자이크 처리)





이럴 때 간단히 해결 할 수 있는 방법은 바로 고.클.린!


아래 사이트에서 최신 버전을 다운 받을 수 있다.

http://bbs.gobest.co.kr/gb4/bbs/board.php?bo_table=goclean2


설치후 아래 2개의 메뉴에서 불필요한 프로그램을 삭제해 주면 된다.



필자는 검색되는 모든걸 쿨하게 지워 버렸다.


이제 괜찮은지 몇일 사용해 봐야 겠다. 

또 문제가 생기면 그때 다시 포스팅 하겠다.

어떤 분이 물었다.

"HTML.. DIV와 TABLE의 차이가 뭔가요? 저는 그동안 table로 작업을 많이 해왓는데, div로 되어 있는 곳이 많더라구요. 차이가 먼가요?"


웹개발(frontend)을 시작한지 몇년 안된 분들에게는 이게 무슨 소리인지... 아무리 생각해도 이해가 안되는 질문일 수도 있다.

하지만 필자는 웹코딩을 접한지 쫌(?) 되서 인지 이 글을 보자마자 무엇을 궁금해 하는지 알 수 있었다.(생각해보니 벌써 15년이 넘었네..)

예전에 웹을 만들때는 웹표준과 같은걸 신경쓰고 만들지 않았기 때문에 html 코딩 시 딱히 정해진 규칙이 없었다.

그렇게 때문에 table를 사용해서 레이아웃을 많이 짜곤 했다. 틀이 딱 잡혀 있기 때문에 안에 넣기만 하면 됬으니...


여튼 잡설은 치우고 다음과 같이 답변을 해 주었다.


예전에는 Table를 많이 썼습니다.
그 이유는 테이블은 형태가 정해져 있기 때문에 레이아웃을 잡기 편하거든요.
아마 질문자 님께서도 홈페이지를 만들때 틀잡기 위해 table를 썼는데 요즘 사이트를 보니 DIV로 많이 되어있어서 그걸 물어 보시는 것 같네요.
저도 예전(약 10년전?)에는 Table를 사용하여 코딩을 많이 했는데 요즘은 웹표준이라는 부분에 중요도가 높아지기 때문에 표준에 맞게 코딩을 하고 있습니다.

웹표준에 맞게 코딩했을때는 장점은 모든 브라우져에 최적화 되고 같은 형태로 보여진다는 장점이 있죠.
그래서 요즘은 기본으로 웹표준에 맞게 작업을 합니다.

Table로 했을 경우에도 큰 문제는 없지만 위에 말한 것과 같이 웹표준에 맞지 않게 되고 또한 브라우져별로 형태가 달리 보일 수도 있습니다.
그렇게 때문에 조금 번거롭지만 DIV 태그를 사용하여 형태를 잡고 CSS로 스타일을 조정하는 방법으로 진행하시는게 공부를 하시거나 직접 사이트를 구축 하시는데 더 좋습니다.

덧붙여, Table은 말그대로 게시판이나 테이블 형태의 데이터를 표현하는데 사용합니다.


1. 웹디자인, 웹퍼블리셔, 웹기획자, 웹개발자, 웹프로그래머, 웹마스터 등등 웹 관련한 직업에 대해서 어떤일을 하는지 알려주세요!
-. 웹디자인 : 말 그대로 포토샵과 같은 툴을 사용해서 전체적인 웹 디자인이나 상세 페이지 등을 만드는 일이에요. 요즘은 웹디자이너가 html, css 코딩 정도는 하는 추세이다.
-. 웹퍼블리셔 : 디자이너가 만든 디자인을 html/css/javascript(jquery)를 가지고 실제 사용자가 보는 페이지로 만드는 작업을 하는 사람이며, 어떠한 브라우져(익스플로러, 오페라, 사파리, 크롬, 파이어폭스)에서 보든 웹디자이너가 디자인한 형태로 웹이 보여지게 작업하는 역할을 한다.
-. 웹기획자 : 보통 PM이라고 하며 싸이트(웹) 하나를 만들기 위해 필요한 모든 사항을 체크하고 기획하며 스케쥴 관리까지 하는 사람이다.
-. 웹프로그래머 : 웹디자이너와 웹퍼블리셔와 다르게 사용자들이 보는 화면이 아닌 화면 뒤쪽에서 각종 처리를 할 수 있도록 작업하는 사람이다.
(예: 회원가입시 이미 가입된 회원인지 체크 해서 아닐 경우에만 회원가입 시키기) - 이는 예중에 몇 개이며 실제 사용자가 모르는 수많은 처리를 한다.
-. 웹마스터 : 위에 4가지 일을 혼자 할 수 있는 사람을 말한다.

2. 웹표준, 반응형, 크로스브라우징, 웹표준 개발이 다른건가요? 다르다면 어떻게 다른건가요?
-. 웹표준 : html를 코딩할때 정해진 규칙을 말한다. 이 표준에 맞게 작업하여야 위에 언급한 5개의 브라우져에 가장 최적화된 형태로 보여지게 된다.
-. 반응형 : 요즘(쫌 됬지만.) 트렌드이며 PC, 스마트폰, 테블릿에서 보았을 때 각 기기에 보기 편하게 자동으로 레이아웃이 최적화 되게 만드는 것이며 CSS라는 언어를 사용한다.
-. 크로스 브라우징 : 위에서 말한 5개의 브라우져 어디에서든 동일하게 보이게 작업하는 걸 말합니다.
-. 웹표준개발 : 웹표준에 맞춰 코딩(개발)하는 걸 말한다.

3. 카페24, 고도몰등 솔루션을 이해/사용하기
-. 솔루션이라고 하는 것은 이미 만들어 진 것을 사용하는 것이며, 이 때 필요한 스킬은 웹디자이너가 하는 역할 정도가 된다. 솔루션을 이해한다는건 이미 만들어 진걸 어떻게 사용하냐는 의미이며 예를 들어 메인 이미지를 만들었는데 어떻게 업로드 하는지 이런 형태를 말한다. 다시 말해 완성된 사이트를 관리자 페이지를 통해 유지보수하며 사용하는 형태이다.

4. 스스로 쇼핑몰하나를 디자인 할수 있는 정도에 코딩까지 배우고 싶은데 어디까지 배워야 할까요?
-. 쇼핑몰을 하나 디자인 하기 위해서는 약간의 기획 능력이 있어야 합니다. 어떤 기능이 필요하냐에 따라 전체 사이트의 페이지 수가 정해지고 그래야지 각 페이지 별로 디자인을 구상할 수 있기 때문이다. 기획자가 있다면 기획자의 요청에 맞게 디자인만 하면 되지만 스스로 하려면 생각 해야 할게 많다.(이 부분은 경험이 매우 중요하다.)
-. 코딩까지 하고 싶다면 HTML과 CSS정도까지 배우시면 좋겠고, 좀 더 트렌드에 맞춰 나가야겠다 생각하면 HTML5, CSS3 정도 공부해서 웹표준을 익히면 되겠고, 동적인 페이지까지 하고 싶다면 jquery(javascript)정도까지 공부하시면 좋다.

5. html,css만 알아도 사이트제작이 가능하다는데 맞나요?
-. 그렇다, 그냥 눈에 보이는 웹 사이트 제작은 디자인 능력, html, css만 가지고 제작 가능하다. 하지만 회원가입이나 사이트에서 영상 보기, 게시판, 방문자 수 계산 등 수많은 동적인 처리를 하기 위해선 다른 언어도 배워야 한다.

6. 자바스크립트, 제이쿼리까지 배우면 웹퍼블리셔쪽으로 나갈 수 있나요?
-. 웹퍼블리셔쪽으로 가고 싶으면 HTML5, CSS3, Jquery(javascript)를 공부하고, 웹표준과 반응형 웹까지 공부 해야 한다.(경험이 중요하다)

7. 반응형을 배우려면 처음부터 다시 배워야하는건가요? html, css, 자바스크립트, 제이쿼리 이렇게 4가지만 할수있으면 만들수있나요?
-. 처음 부터 다시 배우지 않아도 CSS를 공부하여 익숙해 졌을때 반응형을 공부하면 된다. 단순 반응형 만은 사실상 html, css 공부만으로도 가능하다.


다음과 같은 질문이 있었다.


웹과 앱의 이미지 및 퍼블쪽 다른점이 있나요?

웹쪽 디자인만하다가 이번에 어플리케이션쪽으로 수주가 들어와서 작업을 해야하는데

얼핏듣기로는 px단위나 코딩쪽이 웹과 다르다고 한거같아서요

가장 큰 차이점이 무엇이고 어떤걸 중점적으로 신경써서 해야하는지 알려주시면 감사하겠습니다!


앱. 요즘은 웹앱을 쓰는 경우도 많기 때문에 그러할 경우엔 기존 웹 퍼블리싱과 크게 다르지 않게지만 이 질문자는 네이티브 앱에 대한 퍼블리싱을 물어 보았다.

필자는 웹퍼블리싱도 해봤고, 앱도 개발해 보았기 때문에 어느 정도(? 깊게는 모름) 가지고 있는 지식을 바탕으로 성심 성의 껏 아래와 같이 답변해 주었다.


아무래도 웹의 경우에 CSS를 통해 쉽게 스타일을 수정할 수 있다는 점이 앱과 다르겠지요

앱은 기기가 다양하기 때문에 그 다양한 기기에 맞춰 디자인을 해 주어야 합니다.
앱 개발 시 보통은 해상도 별로 이미지를 따로 분리하여 넣어 주게 되어있습니다.

그래서 생각해야 할 부분도 더 많아 지게 되죠.
그렇다고 모든 이미지를 해상도 별로 분리할 필요는 없고, 우선 디자인 시안작업을 마친 후에 개발자랑 대화를 통해 어떤 부분의 이미지를 해상도별로 전달해 줘야 하는지 어떤 부분은 코딩으로 해결 할 수 있는지 협업하셔야 합니다.

웹의 경우에도 브라우저 종류와 OS에 따라 퍼블리싱을 하듯이 앱도 단말기의 해상도에 따라서 최적화 되게 보여 줘야 되기 때문에 생각할 것들이 많습니다.

포털사이트에서 "안드로이드 해상도별 이미지"와 같이 검색해 보시면 도움될만한 정보가 많이 나올 거에요.

처음이 힘든 법이니 너무 겁먹으실 필요는 없습니다.
디자인이 힘든 것이지 이를 퍼블리싱하는 것은 번거로운 작업이지 어려운 작업은 아니니까요.


혹시 앱 개발을 준비 하시는 분들에게 참고가 될까 지식인에 답변했던 내용을 다시 정리해서 올렸습니다.


자바에서는 unsigned를 지원하지 않는다.

하지만 C프로그램과 통신을 하거나 데이터를 공유할 때 unsigned를 사용해야 할 경우가 있다.


이러한 경우 원래 사용하는 타입보다 상위 타입을 선택해서 구현해 줄 수 있다.

예) int -> long


아래 예제 코드를 보면 더 쉽게 이해할 수 있지 않을까? 하는 마음에 간단히 작성해 본다.

 
 
public long getUnsigned(int signedData) 
{
	return ((long)signedData & 0xFFFFFFFFL);
}
 

패킷통신을 사용하는 프로그램을 짜던 중 전송한 패킷의 무결성을 위해 CRC 값을 붙여 전송해야 할 일이 생겼다.

이 참이 바이트 배열을 합치는 방법에 대해 포스팅 해 본다.


이 때 사용되는 함수는 System.arraycopy이다.

아래 코드는 byte 배열을 받아 마지막 2 byte에 0x12, 0x34를 붙여 주는 함수이다.

1
2
3
4
5
6
7
8
9
10
11
12
  
public byte[] addPacket(byte[] origin)
{               
    byte[] packet_data = new byte[origin.length + 2];
    byte[] addPacket = {0x12, 0x34};
 
    System.arraycopy(origin, 0, packet_data, 0, origin.length);
    System.arraycopy(addPacket, 0, packet_data, origin.length, 2);
         
    return packet_data;
}
  


한달여 전에 블로그에 예전에 사용했던 애드센스 광고나 달아 볼까 하고 접속했더랬다.

근데 일정 금액이 차서 그런지 정책 때문인지 PIN 번호 인증을 하라는!!





하지만 PIN번호는 우편으로 밖에 못받기 때문에 시간이 좀 걸리더라도 인증을 위해 주소도 열심히 적고 PIN번호 우편 신청을 했다.

하지만 몇 주가 지나도 소식이 없어서... 배송중 문제가 생겼나 하며 기다리다가 재신청을 했다.


그런데 오늘!! 아기다리 고기다리던 구글 애드센스 광고 PIN 번호가 드디어 도착을 했다.





뜯어 보니 누가봐도 PIN번호인 숫자가 써있다.





급한 마음에 다 찟어 먹음...

여튼 바로 사이트에 접속해서 입력을 하니 다행히 정상적으로 인증이 되었다.





후... 간단하지만 시간이 오래 걸리는 애드센스 PIN번호 인증기였다...

그 동안 활동을 너무 뜸하게 하지 않앗다. 


근데 요즘 뜬금없이 다시 활동 좀 해볼까라는 마음이 생겨 새마음 새뜻으로 블로그 스킨도 바꾸고(직접 만든거임!) 글도 조금씩 올려 보려고 노력(?) 하고 있다.


다시 열심히 해봐야지...

아주 가끔 시간이 날 때 N사의 지식인을 하면서 간단한 코딩이나 문의에 답변을 주곤 한다.


그 중 어떤 질문자의 "웹프로그래밍에 필요한 언어가 뭐가있나요?" 라는 질문에 답변한 적이 있었는데 웹을 처음 시작하려는 사람에게 도움이 될 것 같아 다시 정리해 보았다.


웹은 보기에는 단순하지만 생각보다 손이 많이 가는 일 중에 하나이다.
단순히 웹 제작(보여주기 위한)을 목적으로 한다면 HTML, CSS, Javescript(jquery) 정도만 가지고도 제작이 가능하다.
하지만 데이터를 처리/저장(게시판, 회원가입 등) 해야 한다면 좀 더 많은 언어가 필요하고, 그렇게 되면 해야할 것도 그에 따라 알아야(배워야) 할것도 많아진다.
데이터를 가공/처리를 하기 위해서는 jsp(java)나 php와 같은 언어을 알아야 하고, 데이터를 저장 하기 위해서는 DB(mysql, oracle, mssql 등)언어를 알아야 한다.
또한 웹 제작이 목적이 아닌 운영을 위해서라면 사이트의 시각적인 요소도 매우 중요하게 되는데 이를 위해서는 포토샵과 같은 툴도 다뤄야 한다.

이를 전부 혼자 하기엔 다소 무리가 있기 때문에 보통 각각의 영역을 나눠 분업하도록 되어있다.
디자이너, 퍼블리셔, 서버 개발자, DBA 등. 물론 혼자 다 할수 없는 건 아니지만 그 만큼 열심히 공부하고 많이 작업을 진행해야 한다.

정리하자면,
단순 웹제작 : HTML, CSS, Jacascript
고급 웹 : Java or php, DB(mysql, oracle, mssql 등)
이 필요한 것이다.
하지만 이는 간단히 대표 되는 언어만 열거한 것이며, 각 언어를 공부하다 보면 파생되는 언어들도 상당히 많이 있다.

예를 들어
CSS : CSS3, LESS, SASS
Javascript : jquery, ajax, angularjs 등
java : spring, struts 와 같은 프레임워크/ ibatis와 같이 DB연동을 위한 언어 / 그 외 tiles, jstl 등등..

웹 쪽은 공부할게 은근히 많기 때문에 어느 수준까지의 웹을 제작하기를 원하냐에 따라 공부해야 할 부분의 정도가 결정 될 것이다.


+ Recent posts