미션#.01을 수행하려하면 벌써 미션#.02가 나와있고, 미션#.03가 또;; 이거 은근히 압뷁입니다. ㅎㅎ 저는 조금 벅찬데, 꼼꼼한 분석으로 버그도 잡아내고, 미션도 척척 수행하시는 베타테스터분들 정말 대단하십니다. (진정, 아이팟은 님들꺼!! 저는 바이오가스 슬슬 모으기 시작해야겠어요~ ㅋ)
티스토리 2008 베타테스트 그 두번째 미션 - # 미션 2 - 에디터 Before & After!
1. 무엇이 달라졌나요?
한눈에 봐도 많이 변한 느낌의 에디터! 달라진 점이 많이 보이시나요?
스타일이나 구성, 정책 등 새 에디터가 기존과 달라진 점이 무엇이 있는지 이야기해주세요.
클릭하시면 큰 이미지가 새창으로 보입니다. 베타기간이라 아직 센터, 글쓰기창(에디터)만 공개되었습니다만, 뭐니뭐니해도 관리자화면의 꽃, 에디터가 상당히 변했습니다. 그동안 불편함을 가장 많이 호소하던 부분이기도 한 것 같은데, 아마 베타에서 잘 마무리되고 정식으로 서비스되면 가장 만족하실 부분이 아닌가? 싶습니다. ㅎ
에디터 디자인/사용성
먼저 위에 보시다시피 디자인은 크게 변했다고 할수는 없지만, 깔끔하게 최대한 사용성을 반영한 것이 보입니다. 큼직큼직한 것이 마치 문서작성 프로그램(워드나 한글)을 보는 것 같습니다. 정말 문서작성 프로그램 못지 않게 변한 것이 '웹상에서 이렇게 편하게 글을 작성할 수 있을 줄이야? '이런 느낌을 갖게 합니다. ㅎ
전체적으로 윈도창에 따라 가로로 넓어지는 것이 안정적입니다. 제일 편한 점은 전체 스크롤을 없애고 안쪽에 글쓰기창(아이프레임)에 스크롤만 생기도록해서 기존의 것보다 상당히 안정적이고, 스크롤로 인해 오르락내리락하던 불편이 없어졌습니다. 또한 상단의 메뉴의 깔끔하고 알기쉽게 정리된 것과 새로운 삽입기능들은 새창으로 열리는 점, 오른쪽 사이드, 하단에 탭은 show&hide를 적절히 활용해서 글쓰기창(아이프레임)을 최대한 넓고 편하게 작성하면서 그때그때 필요한 기능을 쓸 수 있습니다. 이건 뭐 정말 경험해보셔야 알 수 있을 것 같은데, 포스팅을 마구마구 하고 싶은 생각이 절로 난달까요? ㅎㅎ
뿐만 아니라 새로워지는 에디터는 기존의 일부 브라우저에서 매끄럽지 않던 불편한 점도 개선된다고 합니다. 다양한 부라우저, 환경에서도 무리없이 사용하실 수 있도록 개선될 예정이라니까 기대해보시기 바랍니다.
이건 쓸데없는 말이지만, 그러고보니 새로운 기능(지도, 사전, 영화, 책정보 등 다음과 연동되는)이 많이 추가되고 깔끔하게 정리된 점들이 약간의 포털삘(?)도 난다고 할 수도 있겠습니다. ㅎ
기존의 에디터와 달라진 기능
기존의 에디터와 달라진 점이 한두가지가 아닙니다. 다 다루자면 글이 너무 길어지기도 하고해서, 제가 생각하는 특징적인 한가지만 적겠습니다. 기존의 에디터와 달라진 기능들은 티스토리메인의 베타카테고리에 다양한 글과 소개를 보실 수 있을 겁니다.
넓어진 디자인과 더불어 알수 있는것 <p>태그의 활용입니다. 원래 문단을 이루는 <p>태그는 아래와 같이 작성하는 것이 웹표준에 맞는 것이라는 것을 대부분 아실 겁니다.
<p>텍스트 텍스트 텍스트 텍스트 텍스트<br />텍스트 텍스트 텍스트 텍스트 텍스트</p>wystan님의 '테터툴즈로 웹표준 지키기'라는 글을 인용하자면,
...태터툴즈에 포함된 위지윅(WYSWYG) 에디터 역시 표준 마크업을 지키기 어렵게 만듭니다. 아무런 꾸밈 없이 글을 쓰면 표준 마크업에 위배되지는 않지만 문단 태그(paragraph) 대신
<br />태그를 사용하기 때문에 적절한 마크업은 아닙니다. 또한, 일부 텍스트 색을 바꾸거나 할 경우에는 금지된font태그가 들어가기 때문에 규격에서 벗어나게 되지요. 이런 문제들에 대한 자세한 사항은 이전에 포스팅한 실질적인 웹 표준을 참고하시기 바랍니다...
wystan님 말씀처럼 기존의 에디터에서는 <p>태그를 활용해 웹표준을 준수하려면 html모드로 직접 작성해줘야하는 귀찮음이 있었습니다. 그동안 저도 귀찮음때문에 <p>태그 없이 <br>태그(줄바꿈)로만 작성하곤 했습니다만, 저뿐만 아니라 대부분 그럴꺼라 생각됩니다.
이번 에디터에서는 기본적으로 글쓰기할때 <p>태그가 둘러집니다. [enter]를 치면 또 다른 문단이 생기고, [shift+enter]를 치면 줄을 바꿉니다. 이건 어떻게 보면 귀찮고 외려 불편한 것 같기도 한데, 저는 조금 적응이 되니까 괜찮습니다. 또한 좀더 웹표준을 준수하는데 도움이 되기도 한거니까 귀찮더라도 이렇게 하는 것이 좀더 옳은 방법이겠죠?
베타테스트가 끝나고 전체적으로 공개되어 서비스될때 분명 이에대한 말이 많을거라 생각됩니다만, 이건 보다 옳은 방법이고 웹표준에 대한 티스토리의 노력이라고 봐야겠죠.
본래는 문단으로 구별해야 하는 텍스트들을 <p>태그를 사용하지 않고, <br>태그를 연속으로 삽입하여 문단으로 구별한 것처럼 보이게 하는 방법은 지양해야합니다.
달라진 에디터의 좋은 점, 불편한 점
<p>태그의 활용으로 인해 불편한 점이라면 <p>태그가 기본적으로 둘러지기 때문에 <p>태그가 필요없는 부분에도 생기는 문제가 있습니다.
예를 들자면, 이미지를 올리면 <p>태그가 감싸안으면서 가운데 정렬을 해버립니다. 아래 코드와 같습니다.
<p style="text-align: center;">
<div class="imageblock center" style="text-align: center; clear: both;">
<img src="http://..이미지.jpg" alt="이미지" height="80" width="80"/>
</div>
</p><body>를 구성하는 요소에는 블록레벨 요소(block-level elements)와 인라인 요소(inline elements) 두종류가 있습니다. 이중 문단(paragraph) 태그는 '문장의 한 덩어리'로 텍스트를 문단으로 정의하려고 사용하는 블록 레벨 요소입니다. 이 <p>태그에는 인라인 요소와 텍스트를 포함하지만 다른 블록 레벨 요소는 포함할 수 없습니다. 따라서 위와같은 경우엔 html모드에서 직접 수정을 해줘야하는 불편이 있는 것이지요.
또, 이미지를 중앙정렬에서 왼쪽정렬로 바꾸거나해도 <div>에서가 아니라 <p style="text-align: left;"> 이런식으로 되기때문에 실제로 이미지가 왼쪽정렬이 되지도 않는 문제도 있습니다.
암튼, 이번의 <p>태그가 기본적으로 생기는 것은 약간(?)의 귀찮음은 있지만 html모드로 왔다갔다하면서 활용하시면 보다 매끄럽고 깔끔하게 글적기를 할 수 있는 것 같아요. 저는 이번에 바뀐 방법이 더 좋습니다.
2. 추가된 기능을 찾아보세요!
새 에디터에는 기존에 플러그인으로 제공되던 일부 기능이 기본 기능으로 정리되고, 다양한 정보 및 서식 첨부를 지원하는 등 전반적인 기능 업그레이가 이루어졌습니다. 과연 어떤 것들이 있는지 낱낱이 밝혀주세요!
낱낱이 밝히기는 무리구요. 여기도 한가지만 적겠습니다. 바로 서식기능입니다. 위에 이미지를 크게해서 보시면 오른쪽 사이드에 서식이라는 박스가 있습니다. 말그대로 자주 사용하는 서식이나 삽입구를 서식으로 저장해뒀다 불러오는 식입니다.
저는 MP3 플레이어로 http://seevaa.net/59 여기 이걸 자주씁니다. 기존의 티스토릴 기본 플레이어는 중앙정렬인데, 이건 제스킨과도 어울리고 색조절 할 수 있어서 스킨컨셉과 어울리는게 이뻐서입니다. 귀찮아도 매번 소스를 긁어서 붙여넣는 식으로 사용했는데, 이번 서식기능때문에 그럴 수고를 덜게 되었습니다. 소스를 '플레이어'라는 서식으로 저장해두고 불러오기만 하면 되니까 엄청 간편해진거죠~
저처럼 자주 사용하는 소스나 삽입구, 서식을 따로 저장해서 그때그때 활용해보시면 좋을 듯합니다.
말이 나온김에 노래 하나 들을까요? 일단은 '플레이어'서식 좀 불러올께요~ ㅎㅎ
bgm // 뷰렛 - 거짓말
3. 숨겨진 단축키를 찾아보세요!
기존 에디터는 물론 이번 에디터에는 다양한 단축키 사용이 가능합니다. 어떤 상황에서 어떤 단축키들이 사용될지 발견하신 단축키들을 찾아보세요~ 저희가 자주 사용하는 기능은 Ctrl+S 랍니다!
이건 센님꺼 긁어왔어요~ ㅋ 단축키는 에디터에서 아이콘 위에만 마우스를 가져가도 뜹니다. 이건 근데 단축키를 외우는 것도 일이네요~ ㅎㅎㅎ
| 단축키 | 용도 | 단축키 | 용도 |
|---|---|---|---|
| ctrl+B | 굵게 | ctrl+K | 링크 |
| ctrl+U | 밑줄 | ctrl+Q | 인용구 |
| ctrl+D | 취소선 | ctrl+I | 기울임 |
| ctrl+Z | 실행취소 | ctrl+Y | 다시실행 |
| ctrl+, | 왼쪽정렬 | ctrl+. | 가운데정렬 |
| ctrl+/ | 오른쪽정렬 | Tab | 들여쓰기 |
| Shift Tab | 내어쓰기 |
마지막으로,
근데 이거, 미션 하나 수행하는 데 식겁하겠습니다.;;
'blog' 카테고리의 다른 글
| # 미션 3 - 새로워진 에디터의 사이드바와 하단 설정창에 어떻게 생각하세요? (16) | 2008/07/18 |
|---|---|
| # 미션 2 - 에디터 Before & After! (23) | 2008/07/13 |
| 티스토리에 wysiwyg.css 설정해보기 (28) | 2008/07/11 |
| 사이트 빠르기 대결 (11) | 2008/07/10 |
Twitter
follow me on Twitter
Delicious
Flickr