이전 포스팅 – 카페24 모바일에서 소비자가를 표시하는 방법에서 카페24에서 소비자가와 판매가를 구분하는 작업을 하고난 뒤에 자동으로 두 값을 이용해서 할인율을 표시하는 자바스크립트입니다.

See the Pen
소비자가,판매가 퍼센티지 계산
by 배현기 (@illustudio)
on CodePen.

스크립트는 단순합니다. 두 값을 변수에 저장한다음 정규표현식을 이용해 한글을 제외한 숫자만 추출한 뒤 퍼센티지 계산을 합니다. 그리고 새로운 엘리먼트를 만들어서 해당 내용을 담아서 원하는 위치에 삽입하는 방식으로 구성된 스크립트입니다.

해당 내용을 운영중인 카페24 쇼핑몰에 적용하고 싶으시면 연락주세요. 해당 내용을 바로 적용할 수 있는 경우도 있지만 소스의 가공이 필요해지는 경우도 있습니다. 작업 난이도에 따라 소정의 작업료(5~10만)만  받고 진행해드리도록 하겠습니다.

카페24 쇼핑몰을 운영하시는 분들 중에 웹디자이너 혹은 웹퍼블리셔의 도움 없이 혼자서 해결해나가는 분들이 있습니다. 간혹 이런 부분에 대해서 쇼핑몰 운영자들이 모여있는 커뮤니티에서 질문글이 올라오곤 하는데요.

아무래도 전문적으로 카페24 스킨을 수정해 온 사람들이라면 모를까 임시방편으로 해결해오던 습관 혹은 누군가 귀찮아서 대충 알려준 방법을 공유하는 모습들이 보입니다. 아마도 카페24 스킨을 수정할때 가장 빈번한 내용이 “배너”를 교체하거나 추가할때 필요한 내용들일 것입니다.

좀 과격하게 말씀드리자면 일단 과거에 table로 레이아웃을 잡던 방식으로 html을 배우신 분들은 ‘나도 html을 할 줄 안다’ 라고 생각하시지 않았으면 좋겠습니다. 그때와는 웹 문서를 만드는 방식이 너무 달라져버렸습니다. html 문서 안에서 스타일과 크기 등 모든 것을 해결하던 방식에서 이제는 html은 문서의 구조만 담당하고 css가 스타일과 색상, 배치, 크기 등을 담당하고 자바스크립트로 동적인 모션이나 데이터를 제어해주는 세상이 됐습니다. 역할이 분담이 된 셈인데, 이렇게 된 데는 다 이유가 있습니다.

예를 하나 들어볼께요.

이를테면 가로로 2단 그리드로 배치되는 이미지를 만드는 방식입니다.  간략하게 보자면 과거의 테이블로 레이아웃을 잡던 방식이라면 아래와 같은 방식을 취했겠죠.

테이블 코드에 대해서 잘 이해하고 다루는 사람이라면 한 눈에 “아 전체 가로폭은 1200픽셀이고 600픽셀씩 이미지를 배치해주는 코드구나” 이렇게 이해할 수 있을겁니다. 하지만 테이블 태그의 특성을 보면 일단 table > tbody > tr > td 이렇게 총 4번이나 안으로 들어가서 구조를 파악해야하므로 브라우저에서 그만큼 많은 단계를 거쳐야하고, 이런 부분이 많아질 수록 브라우저에서 이미지를 표현하는데 많은 시간이 걸립니다.

그래서 거기서 조금 더 나아간 방식이 style을 활용한 방식입니다.

한눈에 보기에도 훨씬 간결해졌죠? 하지만 이런 방식으로 코딩을 하면, 가로폭이 1200픽셀에서 1100픽셀로 바뀌거나 1400픽셀로 바뀌는 상황에서 또 저걸 찾아서 바꿔줘야한다는 문제가 있습니다. 물론 저 배너 하나뿐이라면 가서 바꾸면 되지만, 배너를 보통 하나만 쓰는 경우가 없죠.

그래서 아래와 같은 방식으로 개선해서 쓰게 됩니다.

조금 생소할 수 있지만, 여기서 처음 보이는 부분이 바로 class라는 부분입니다. class는 한번 지정해놓으면 얼마던지 쓸 수 있기 때문에 무척 편리합니다. 이를테면 아래와 같은 방법도 가능해요.

보시다시피 클래스가 3번이나 쓰였죠? 그래도 모두 같은 내용으로 1200픽셀이라는 폭이 허용됩니다. 그럼 나중에 1100으로 줄어들거나 1400으로 늘어나더라도 우리는 style 태그 안에 width:1200px이라는 값만 수정해주면 됩니다. 관리가 굉장히 편하겠죠? 여러번 반복해서 수정해야할 부분을 딱 한줄만 고쳐주면 전부 수정되니까요.

위의 방식도 문제가 되는 점이 있는데, style 태그가 작성된 html 문서 안에서만 저 내용이 적용된다는 점입니다. 보통 웹사이트는 html 문서 하나로만 구성되지 않습니다. 여러 페이지에 걸쳐서 width:1200px이라는 값이 필요할 수 있겠죠? 그래서 css 파일이 필요한겁니다.

어떤 문서건 head 태그 안에 <link rel=”stylesheet”  type=”text/css” href=”스타일 시트가 위치한 경로와 파일명”> 이 한줄만 넣어주면 공통적으로 스타일 시트를 재활용할 수 있습니다. html과 css 부분을 분리한 예제가 바로 아래와 같은 경우입니다.

See the Pen 스타일 시트를 활용하는 방법 by 배현기 (@illustudio) on CodePen.0

 

내용을 무척 길게 작성하게 되었는데, 이렇게 이야기하는 이유는 좀 더 미래를 보고 작업해야할 필요가 있다는 이야기를 하고 싶었습니다. ‘지금 당장 급하니까’라는 이유로 맨 처음에 설명한 inline 방식 – html 태그 안에 직접적으로 스타일을 정의하는 방식으로 style 적용한다던지, 아니면 html 문서 안에 style 태그로 적용 하는 방식으로 하면, 나중에 쌓아둔 숙제처럼 밀려오는 수많은 수정사항에 못이겨 관리하던 직원이 나가버리거나 사이트를 새로 만들거나 하는 사태가 벌어질겁니다.

이런 문제를 사전에 방지하려면 사실 처음부터 이런 부분에 잘 알고 있는 사람에게 일을 맡기는것이 좋겠죠. 그래서 혼자 운영하는 부분에서 정말 공부해야할 것이 많을겁니다. 그래서 사실 커뮤니티에서 알려주시는 분들도 좋은 의미에서 공유하시는거겠지만, 인라인 방식과 스타일 태그로 알려주는 방식은 차라리 알려주지 않느니만 못하다는것을 알았으면 좋겠습니다.

결국 이런 방식으로 html, css 파일로 나누어서 작성하게 된 이유는 모두 관리면에서 이점이 크기 때문입니다. 불필요한 작업은 최소화해야된다는거죠. 이런 방식을 따르지 않고 그저 작성한 사람 ‘혼자서만 알아보면 된다’, ‘나 당장 급한데로 해버릴꺼다’ 이런 식으로 일처리를 하기보단, 관리가 편한 방식을 따라서 작성하는 것이 좋습니다. 일단 다음에 관리해야할 사람이 망연자실할 정도로 후환(?)을 만들어 놓아서는 안되겠죠 ㅎㅎ

 

포토샵에 대한 기본기를 익힐 수 있는 강좌를 연재중입니다. 오늘은 2번째 강좌로, 영역을 선택하는 방법 중 Marquee (마퀴) 툴을 다루는 방법에 대해서 설명 드립니다.

마퀴툴은 아주 기본적으로 자주 쓰는 기능이기때문에 잘 알아두시면 요긴하게 사용할 수 있는 툴입니다. 필수 툴이기때문에 꼭 잘 알아두시길 바랍니다.

포토샵은 아주 오랜시간동안 큰 변화없이 인터페이스를 유지해왔습니다. 그 말은 즉 버전에 크게 구애받지 않고 기능들을 찾아쓸 수 있다는 이야기이기도 합니다.

포토샵에서는 주로 아래와 같이 큰 맥락으로 나눠서 볼 수 있습니다.

  • 메뉴표시줄
  • 툴패널 + 옵션바
  • 캔버스
  • 윈도우 패널

이러한 화면구성을 효율적으로 이용하며 자기만의 방법으로 작업하는 다양한 방식들이 존재합니다. 이렇듯 정해진 인터페이스지만, 정답은 없습니다. 오히려 더 나은 방법이 여러사람의 아이디어 속에서 계속해서 나오고 있습니다.

포토샵을 통해서 나오는 다양한 이미지들도 결국 이러한 기본 기능을 어떻게 조합해서 잘 사용하느냐에 따라 퀄리티가 다르게 나옵니다. 모든 메뉴를 다 잘 알 필요는 없습니다. 필요한 것만 익히면 됩니다.

대부분의 사용자들이 그렇게 포토샵을 활용하고 있고, 지나치게 많은걸 알아야할 필요도 없습니다.

보시다가 궁금하신 점 있으면 댓글 남겨주시고, 구독 및 좋아요도 부탁드릴께요. 계속되는 컨텐츠 생산에 큰 응원이 되어줍니다.

 

포토샵

포토샵은 이미 많은 분들에게 알려진대로 사진 편집 및 보정, 디자인, 일러스트레이션, 합성 등 다양한 분야에서 활용되고 있는 그래픽 소프트웨어입니다.

포토샵은 그래픽에 대한 만능도구처럼 다양한 기능이 존재합니다. 하지만 전문가들도 포토샵에 있는 모든 기능을 모두 활용하지는 않습니다. 본인의 업무에 필요한 도구들 이외에는 거의 사용할 일이 없기 때문이죠.

포토샵

그래서 포토샵을 막연하게 잘 하고 싶다고 하면 더 없이 어려워질 수 밖에 없습니다. 합성, 사진, 디자인, 일러스트레이션 등 모든 분야를 다룰 것이라는 이야기와 마찬가지이기 때문입니다.

실제로 그렇게 일하는 사람은 없다고 봐도 무방합니다. 한 분야에서 전문성을 인정받기도 어려운 세상에 모든 분야를 다 잘한다는것은 불가능에 가깝죠.

그래서 일단 당장 필요한 것을 익히면서 포토샵이라는 도구에 겁을 내지 않도록 친해지는 것이 가장 중요합니다. 나머지 기능은 필요없거나, 필요하면 나중에 배워도 무방한 것들이기 때문이죠.

지금도 어도비에서는 소소한 업데이트를 통해서 포토샵에 기능을 추가하고 있습니다. 이 모든 기능을 모두 마스터한 다음 포토샵을 사용하겠다고 하면, 아무래도 무척 오랜 시간이 필요할 겁니다.

시작은 가벼울 수록 좋습니다. 모든걸 다 짊어지고 가려고 마음먹으면 한 걸음도 딛을 수 없기 때문입니다. 쉬운  것부터 – 따라할 수 있는 것 부터- 시작하면 됩니다.

포토샵 버전도 크게 개의치마세요. 기초적인 기능의 대부분은 CS3 이후로 크게 변하지 않았습니다. 물론 가능하면 최신버전일 수록 좋습니다. 최신 버전은 번거러운 일을 쉽게 해결할 수 있도록 기능을 개선하고 있기 때문입니다.

앞으로 짬짬히 포토샵에 대한 내용을 포스팅할 예정입니다.