지난번에 뭐라도 만들 것처럼 큰소리쳤지만, 오랫만에 웹 개발하니 어렵군요. ㅠ_ㅠ
MS의 강력한-이라고 쓰고 편리한이라 읽는- IDE 덕분에 클래스의 멤버나 메소드는 일일이 외우지 않고 인텔리센스에 의지해서 코딩을 하다보니 자바 스크립트나 CSS가 되려 어렵습니다;;
웹 프로그래밍 언어는 오랫동안 사용하지 않아서 문법에 대한 감도 많이 떨어졌고 레퍼런스 찾는데도 시간이 많이 걸리더군요. 아후.

코드 보기▼


제목대로 첫번째 개짓입니다.
만드는 거야 Hello World!랑 별 차이도 없으니까 코드 설명은 넘어가고 이런 단순한 걸 구현하면서 겪었던 문제점을 짚어보겠습니다.

  • 아이콘의 정렬 문제
      위에서 보시다시피 16x16 크기의 아이콘을 추가해봤는데 정렬이 멋대로 됩니다.
    아마도 개짓이 배치되는 패널의 TOP에 정렬된 것 같은데 혹시나 해서 매니페스트 xml에 <icon height="16" width="16" valign="bottom">처럼 CSS를 넣어봤지만 당연하다는 듯이 먹질 않더군요. 포럼에 질문을 올려놓긴 했는데 영어를 못해서 말이 전달이나 됐는지 모르겠습니다. -ㅅ-
      또한 가이드에 나온 것 처럼 32x32라고 해도 여전히 Top에서부터 정렬이 되어 아이콘의 일정부분이 타이틀바 위쪽으로 삐져나옵니다. 그나마 16x16 보단 보기가 괜찮지만요.
  • 아이콘과 타이틀과의 간격 문제
      역시 아이콘과 타이틀 사이의 간격을 조절할 수 없습니다. 좀 더 줄였으면 좋겠는데 말이죠...
  • 개짓 레이아웃의 높이 조정 문제
      개짓의 너비는 사용자 브라우저의 너비에 따라 자동으로 조정되니까 할말이 없지만 높이는 기본적으로 개짓내의 컨텐츠에 따라 자동 조정되고 너무 길 경우 스크롤바가 생겨나게 됩니다.
      이건 고정적인 크기를 가진 개짓의 경우 상당히 애를 먹을 수 있는 부분인데 약간의 꽁수로 처리할 수 있을 듯 합니다.
  • 느려터진 live.com
      이건 정말 정말 치명적입니다. 게다가 어찌할 도리도 없습니다. 아무리 베타라곤 하지만 로딩속도가 정말로 느립니다. 좀 상태가 괜찮을 때에도 개짓을 로딩하는데 눈에 띄게 지연이 걸립니다. 아래에서 좀 더 자세히...

일단 아이콘 및 타이틀에 대한 조정이 불가능하거나 아직 조정하는 방법을 찾지 못했습니다.
뭐 중요한 부분도 아니고 넓은 아량으로 넘어갈 수....있겠습니까!!

개짓의 높이는 컨텐츠에 따라 자동 조정됩니다.
일정한 높이를 유지하고 싶은 개짓이라면 꽁수로 <div>엘리멘트를 추가시켜 일종의 백그라운드로 사용할 수 있겠습니다.
'My first gadget'의 주황색 부분이 바로 <div>엘리멘트를 사용하여 고정크기를 만들어 준 것이죠. 저 상태에서 가로로 늘려도 주황색 부분은 변함이 없습니다.
물론 표시될 컨텐츠는 저 영역에서 벗어나지 않도록 조정해야겠지요.

하지만, 여기에도 문제가 있습니다. 'My first gadget'에 보시면 <div>로 만들어놓은 레이아웃 영역이 개짓의 프레임 영역을 완전히 채우지 못합니다. 지금 저 상태도 가로 너비를 최소로 줄인 상태인데, 프레임이 더는 작아지지 않습니다.
즉, 개짓 프레임 자체의 최소 크기가 정해져 있다는 말이죠.
그리고 프레임 테두리(회색 라인)의 안쪽으로도 약 5px정도의 유격이 있고, 특히 아래쪽에는 뭔가 눈에 잘 띄지 않는 바가 있습니다. 차라리 확실히 보이면 상관 없을 것도 같은데 미묘하게 잘 안보이는 무늬라서 그냥 여백으로 보이네요.

어쨌든 가장 큰 고민이었던 높이 조절 문제는 그럭저럭 해결할 수 있을 것 같으니 그나마 다행이네요.

마지막으로, live.com 자체에 대한 불만이랄까요.
테스트 내내 로딩이 너무 짜증났습니다.
보시다시피 별로 표시할 내용도 없지만 개짓 표시를 위한 이런저런 코드들을 웹 브라우저 특성상 매번 다운로딩 또는 체크하게 될 테고 내부적으로 HTTP 쿼리가 증가하면서 초기 반응 속도가 치명적으로 느립니다.
또한 전체적인 UI가 깔끔하긴 한데 손이 잘 안가게 되어있다랄까요?
옙. 불편합니다.


결론.
손에 익을 때까지 시간이 좀 걸릴 것 같네요.
오늘은 여기까지.

신고
Posted by gongdo
TAG


티스토리 툴바