NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


드림위버 ‘단축키’와 ‘양질전환의 법칙’.

본문 건너 뛰기

책 표지 - 철학에세이. 동녘.안녕하세요? 정찬명 입니다.

여러분은 대학시절 어떤 동아리 활동을 하셨나요? 저는 생긴것 답게 ‘독서토론동아리’에서 활동했었습니다. 작년 연말 팀 내에서 ‘가장 책을 많이 읽을 것 같은 사람’으로 지목되기도 했었는데 이것이 ‘생긴것 답게’의 증거라고 치죠.(주의:생긴것과 실제 다독률의 현저한 차이) 대학시절에는 책이 너무 좋아서 동아리에 가입했다기 보다는 ‘이제 대학생도 되었으니 책도 좀 읽자’라는 의지가 있었는데요. 기대만큼 그 의지는 따라주지 못했지만 그 때 읽은 책들이 인생관에 적지않은 영향을 주었던것 같습니다. 제가 가입한 동아리에서는 ‘사회과학’서적을 주로 읽었습니다. 특히 유물론을 알기 쉽게 풀어쓴 책들을 재미있게 읽었죠. 저는 오늘의 포스팅을 위하여 다시 유물론 책을 뒤적거렸고 ‘양질전환의 법칙’이라는 말을 찾아 냈습니다. ‘질적인 변화는 양적인 변화에 의해서만 일어난다’ 라는 것이 바로 ‘양질전환의 법칙’이고 오늘의 팁은 여기서 부터 시작하겠습니다.

저희와 같은 직군에서 근무하시는 분들은 HTML/CSS 편집도구(드림위버, 에디트플러스…)를 하루중 얼마나 다루실까요? 하루종일 옆에서 시간을 측정하면서 지켜본 적이 없으니 정확히 알 수는 없지만 추측해 보면 하루중 절반이 넘지 않을꺼라고 생각합니다. 메일 읽어야죠. 성실하게 답장 해야죠. 구두로 대화를 하거나 회의에도 참석 해야죠. 포토샵도 다뤄야 하구요. 어떤 HTML 엘리먼트와 CSS 기법을 사용해야 하는지 창의적인 고민도 해야하고. 4대 브라우저에서 렌더링 테스트도 해야하고. 렌더링된 화면은 디자이너의 시안과 일치하는지 일일이 대조도 해야 하구요. 커피 마시고 담배 태우고 밥도 먹어야죠. 이런 시간들을 제외하고 남는 시간이 편집기를 다루는 시간이 되겠죠. 따라서 저는 하루중 8시간을 근무하지만 실제로 편집툴을 다루는 시간은 4시간 미만일 것으로 추정 하고 있습니다. 이 4시간동안 편집툴을 사용하는 개발자들의 작업 효율은 과연 비슷할까요?

제가 처음 드림위버의 단축키를 과도하게(?) 사용하기 시작한 계기는 위와같은 질문으로부터 시작되었습니다. ‘단순한 작업을 빠르게 처리하면 보다 창의적인 일에 시간을 소비할 수 있다’는 생각이었고 소규모 에이젼시에 근무하던 시절에는 정말로 대부분의 일정을 앞질러 나아갔습니다. 남는 시간에는 관련분야의 전문지식을 읽거나 습득한 지식을 블로그에 포스팅 하는 등 ‘생각대로’하면 되었습니다. 지금은 뭐 남는 시간에는 주로 매일같이 올라오는 ‘BTS’를 해결하고 있습니다만. ㅜㅜ (BTS : Bug Tracking System) BTS는 아무리 해치워도 끝이 없네요.(이게 다 IE 때문이야!) 제가 하고싶은 이야기는 여러분이 ‘질적으로 달라지기 위해서는 반드시 양적인 변화가 필요하다’라는 것이고 하찮아 보이는 드림위버의 단축키 활용은 여러분의 성장에 도움이 된다는 겁니다. 드림위버 단축키 활용법 소개하는데 ‘양질전환의 법칙’까지 들먹거리는건 제가 생각해도 참 유별나다 싶지만 제가 도구 사용법만 알려드리면 별로 재미가 없지 않나요?

이제 시작 할께요! 제가 즐겨 사용하는 단축키를 모두 소개해 드릴텐데요. 이러한 단축키들은 드림위버에서 기본적으로 제공하는 것도 있고 제가 만들어 사용하는 것도 있습니다. 제가 만들어 사용하는 단축키는 우측에 ‘사용자 정의’라고 적어두겠습니다.

  • 엘리먼트 삽입
    • div : Ctrl+Alt+D (사용자 정의)
    • h1~h6 : ‘Ctrl+1′ ~ ‘Ctrl+6′
    • ul : Ctrl+Alt+Shift+U (사용자 정의)
    • ol : Ctrl+Alt+Shift+O (사용자 정의)
    • li : Ctrl+Alt+Shift+L (사용자 정의)
    • dl : Ctrl+Alt+Shift+F (사용자 정의)
    • dt : Ctrl+Alt+Shift+T (사용자 정의)
    • dd : Ctrl+Alt+Shift+D (사용자 정의)
    • a : Ctrl+Alt+A (사용자 정의)
    • p : Ctrl+Shift+P
    • img : Ctrl+Alt+I
    • strong : Ctrl+B
    • em : Ctrl+I
    • table : Ctrl+Alt+T
    • form : Ctrl+Alt+F (사용자 정의)
    • fieldset : Ctrl+Alt+S (사용자 정의)
  • 테이블 편집
    • 테이블 셀 합치기 : Ctrl+Alt+M
    • 테이블 열 삭제 : Ctrl+Shift+’-’
    • 테이블 행 삭제 : Ctrl+Shift+M
  • 빠른 이동/선택/삭제
    • 단어 단위로 이동 : Ctrl+방향키
    • 단어 단위로 선택 : Ctrl+Shift+방향키
    • 단어 단위로 삭제 : Ctrl+BackSpace, Ctrl+Del
  • 주석 삽입
    • HTML 주석 삽입 : Ctrl+Alt+C (사용자 정의)
    • CSS/JS 주석 삽입 : Ctrl+Alt+Shift+C (사용자 정의)
  • 코드 접기/펼치기
    • 코드 짝 맞추어 접기 : Ctrl+Shift+C (사용자 정의)
    • 선택한 코드 펼치기 : Ctrl+Shift+E
  • 코드 자동완성 : Space, Ctrl+Space
  • HTML Validation 검사 : Shift+F6
  • 디자인뷰/코드뷰 전환 : Ctrl+`
  • 열린 탭간 이동 : Ctrl+Tab

제가 즐겨쓰는 단축키는 모두 30개 정도이고 직접 만들어서 활용하는 ‘사용자 정의 키’는 13개 로군요. 보시면 아시겠지만 빈도 수가 높은 엘리먼트는 모두 단축키를 할당해서 삽입하고 있으며 직접 타이핑 하는 것은 거의 속성 뿐인데 이마저도 자동완성 기능을 사용합니다. 이것이 바로 제가 현재의 콘텐츠를 마크업하기 위한 최적의 구조를 고민하고 창의적인 CSS 기법에 보다 많은 생각의 에너지를 투자할 수 있는 비법 입니다. 한 순간에 모두 외우려고 하기보다는 필요할 때 마다 하나씩 순차적으로 셋팅하면서 머리보다 손으로 익히시는 것이 효과적 입니다.

사용자 정의 단축키 셋팅은 이렇게 하세요!

File > Keyboard Shortcuts. 키보드 단축키 대화상자를 엽니다. 

드림위버 키보드 단축키 문맥메뉴

Current set > Duplicate set. 드림위버의 기본 단축키 셋에 대한 사본을 만듭니다. 

드림위버 키보드 단축키 설정 대화상자 - 현재 셋의 사본 만들기

Name of duplicate set. 단축키 사본의 이름을 작성 하시구요. 

드림위버 키보드 단축키 사본의 이름 입력

Commands. 단축키를 설정하고 싶은 명령을 찾아낸 다음 나만의 단축키를 만듭니다. 

드림위버 키보드 단축키 설정 대화상자 - div 엘리먼트에 대한 단축키 생성 예

만약 원하는 명령이 어디 숨어 있는지 찾기 어렵다면 Export set as HTML 명령으로 현재 설정된 기본 단축키 목록을 HTML 파일로 내보내기 하세요. 

드림위버 키보드 단축키 설정 대화상자 - 현재의 셋을 HTML로 내보내기

누구나 쉽게 따라할 수 있고 매우 적은 노력으로도 ‘양질전환의 법칙’을 실천할 수 있는 팁이 아닐까요?

분류: 생활의 발견,웹 디자인,편집기 | 2008년 7월 9일, 1:01 | 정찬명 | 댓글: 22개 |
트랙백URI - http://naradesign.net/wp/2008/07/09/148/trackback/

22개의 댓글이 있습니다.

  1. 김요한 댓글:

    저도 Edit+ 에서 사용자정의 단축키가 대략 10개 내외가 되는군요 ㅎㅎ

    저는 단축키를 30개까지는 사용하지는 않는것 같고..대략 15개 정도 사용하는것 같아요.

  2. 정찬명 댓글:

    상쾌한 아침이네요. 시간되시면 Edit+ 단축키도 정리해서 한번 소개좀 해주세요. ^^ 좋은하루 되시구요!

  3. 김요한 댓글:

    상쾌한 아침이네요..
    흠.. 이놈의 게으름이 문제죠 ㅠ,.ㅠ
    사실 블로그에 미완성된 글이 4개정도 있는데 이것들이 언제 완성이 될지는 미지수라죠 ㅠ,.ㅠ

  4. 정찬명 댓글:

    1개를 채 완성하기도 전에 다른 글을 쓰신다는거죠? ㅎㅎㅎ

  5. 이원민 댓글:

    단점하나 있습니다! 결과물을 미리 보면서 코딩을 해야하는 적응감 때문에 코딩하는 재미 하락! 드림위버가 무겁다라는게 제 생각입니다. 결국은 자기 편한대로이지만, 드림위버를 쓰는 사용자들에게는 상당히 좋은 팁인 것 같습니다. :)

  6. 정찬명 댓글:

    드림위버의 디자인뷰(WYSIWYG 모드)는 CSS에 대한 미리보기를 렌더링 하기 때문에 정말 많이 느립니다. 때문에 저는 거의 사용하지 않구요. 렌더링 확인은 그냥 브라우저를 사용합니다.

    드림위버의 디자인 뷰를 확인하는 경우는 HTML 코드 구조가 복잡해서 그것을 시각적으로 확인할 필요가 있을 때(특히 표 편집할 때) 사용하는데 그 때에도 CSS는 제거된 상태로 확인합니다.

    드림위버의 디자인뷰에서 CSS가 제거된 상태로 볼 수 있는 옵션이 있습니다.
    View > Style Rendering > Display Styles (체크 해제)

    이렇게 사용하게 되면 디자인뷰에서도 CSS를 렌더링 하지 않기 때문에 굉장히(?) 빠르답니다. ^^
    드림위버가 느린건 사실이지만 빠르게 쓸 수도 있다니깐요~ㅎㅎ.

  7. 박현우 댓글:

    요즘들어 부쩍 웹표준에 대해 절실히 느끼고 있습니다.
    테이블로만 코딩하면 막강하고 쉽게할 수 있어서 편했습니다.
    드림위버로 무자비하게 그려데고 보이는데로 했었는데.
    막상 웹표준 방법을 공부하고서 부터 보는 테이블은 그야말로 무자비였더군요..
    궁금한게 있다면, 저도 드림위버로는 웹표준 코딩을 하니 차라리 안쓰게 되더군요.
    그냥 확인할떈 편하게 오페라로 5초후 자동 리플래쉬를 걸어두는게 차라리 낳으니까요.
    근데 간혹 궁금하다고 여겨지는게 드림위버의 위지웍 즉 css 렌더링 결과랑
    브라우져의 결과가 다르다는걸 느끼고 그렇게 보일떄가 많습니다.
    그건 드림위버의 위지웍의 버그혹은 원래 그런건지 궁금하네요.

  8. 정찬명 댓글:

    박현우님 안녕하세요?

    드림위버의 위지윅 모드는 정말 최악이죠. ^^; 아주 때려주고 싶을 정도로 버그가 많고 그점 때문에 저는 베타 테스터로 참여하면서도 그쪽 관련 버그는 아예 리포트도 하지 않고 있습니다. 그리고 드림위버의 위지윅 모드는 리소스를 잡아먹는 주범이기 때문에 저는 위지윅 모드가 필요할 때 CSS를 끈 상태로 확인합니다.

    저처럼 드림위버 디자인뷰에서 CSS 렌더링 기능을 끄고 아예 도움을 받지 않는 것이 속이 편하다고 생각되시면 이렇게 한번 해보세요.
    View > Style Rendering > Display Styles (체크 해제)

    원래 그런건지 궁금하다고 하셨는데 ‘원래 그렇다’고 밖에 말씀 못드리겠네요 ㅜㅜ; 그럼에도 불구하고 드림위버 만한 툴 없다고 생각합니다. 좋은 하루 되시구요. ^^

  9. 정낙훈 댓글:

    에디트플러스를 이용해서 코딩을 하는데 늘 일일이 한줄 코드 작성하고 또 한 번 브라우저로 확인합니다. 이게 어떻게 작동되는 것인지 몰라서 그렇지요. ㅠ_ㅠ
    그래서 제가 이렇게 느린가 봅니다.

  10. 정찬명 댓글:

    아무리 느려도 그걸 즐기시길 빕니다. ^^

  11. 조현진 댓글:

    철학 에세이… 정말 오랜만에 보네요. 저 책 어쨌더라…

  12. 정찬명 댓글:

    저도 지금은 없어요~ ㅎㅎ

  13. 황용이 댓글:

    코드힌트가 좋아서 드림위버c4를 사용해보고있는데요..
    괜찮은거 같아요..
    오류도 잘 잡아주고 작업환경 따봉인데요..에디트+ 보단 당연히 느리겠지만..
    저도 디자인뷰는 볼일이 없어서 display style(체크해제) 했습니다.
    c4쪽에 변경사항부분에 대해서 좀 다둬줬으면 좋겠어요..
    무엇이 좋아졌는지..

  14. 정찬명 댓글:

    황용이님 안녕하세요? 제가 CS3에서 CS4로 넘어온지가 벌써 일년정도 되었고 특별히 리뷰를 해본적이 없어서 직접 설명은 못드리지만 CS4의 새로운 기능에 대한 설명이 있네요. ^^ http://help.adobe.com/ko_KR/Dreamweaver/10.0_Using/WS2C41F19D-502B-4fb5-8A54-4442E2127C84a.html

  15. 후~ 댓글:

    좋은글 읽고 좋은정보 담아갑니다..
    한동안 웹을 떠나 있다 다시하려니 많이 바뀌었네요! 예전 잠시 Topstyle을 사용했는데요
    요즘 웹표준 저작툴로는 드림위버를 많이 사용하나요?
    드림위버를 잘 사용치 않아서 드림위버를 배워야하나 고민이에요..

  16. 정찬명 댓글:

    @후~
    도구를 선택하는 것은 어디까지나 개인의 선호 문제라고 볼 수 있겠지요. 중요한 것은 도구가 아니라 도구를 사용하는 사람이니까요. 한편 제 주변에서 관련 직군에 계신 분들은 절반 이상 드림위버를 사용하고 있답니다. ^^

  17. 김상훈 댓글:

    안녕하세요.
    단축키에 대한 궁금증이 있는데요.

    사용자정의로 등록한 단축키를 백업받고 싶습니다.
    현재 컴퓨터를 포맷하는데 새로 설정하기가 여간 번거로운 일이 아니네요.
    그래서 백업 받은 후 덮어쓰기나 불러오기를 해서 사용하던 단축키를 쓰고 싶은데요.
    백업은 어떻게 받나요? ^^;

  18. 정찬명 댓글:

    @김상훈
    현재로써는 ‘설정을 HTML로 내보내기’ 하는것이 유일한 대안입니다. 이건 백업을 받는것은 아니고 단지 어떤 단축키를 지정해놨는지 기억을 도울 뿐이라서 원하시던 기능은 아닙니다. 저도 상당히 귀찮아 하면서 매번 새로 셋팅하고 있답니다. ㅡㅡ;

  19. 김상훈 댓글:

    엄청난 검색으로 답을 알아냈습니다. ^^

    C:\Documents and Settings\사용자아이디\Application Data\Adobe\Dreamweaver 9\Configuration\Menus\Custom Sets

    위의 경로로 가면 저장한 단축키 값을 백업 받을 수 있습니다.
    저처럼 고생하시는분들에게 좋은 답변이 되셨기를 바라며 ㅎㅎ

  20. 정찬명 댓글:

    @김상훈
    아! 그런방법이 있었군요. 완전 유용한 정보 고맙습니다! ^^

  21. 김현진 댓글:

    혹시 단축키 중 span 태그 설정할수 있는 방법은 없을까요?
    html5는 font 태그 지원을 하지 않는다고도 하고
    웹표준 코딩을 하면서 굉장히 많이 쓰는 태그인데 단축키지정을 메뉴이름을 아무리 찾아봐도 없어서요….
    없다면 할수 없지만 제가 모르는거라면 좀 가르쳐주세요…ㅠㅠ

  22. 정찬명 댓글:

    @김현진
    찾아봤는데 없네요. span 태그는 의미가 있는 태그가 아니라서 사용할 일이 그렇게 많지는 않을 텐데요. span 사용은 디자인을 위해 마크업을 하는 경우에 해당하기 때문에 최소화 하는 것이 좋습니다. ^^

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님