지금은 지웠지만 예전에 수직형 타임라인 위젯 스킨을 공유한 적이 있었는데요.

그때 게시판 스킨으로도 만들어보겠노라 하고는 벌써 5년이 넘게 시간이 흐른 것 같습니다ㄷㄷㄷ

 

그러다 이번 연휴에 조금씩 작업을 해보았는데요.

대강 모양새는 나온 것 같습니다.

 

https://dev.aporia.blog/board_zjsF61

 

과거의 위젯 스킨과 다른 점은

 

- 양방향 목록일 때 빈 공간을 최소화하기 입니다. 즉 이런 모양이 아니라

다음과 같이 배열을 하는 거죠ㅎ

이렇게 하니 공간 낭비도 줄이고 좋은 것 같더라구요.

masonry라는 플러그인을 사용해서 배열을 맞춰주는 방법도 있는데, 기존의 위젯 스킨 소스를 기본으로 수정하려다보니 잘 안 되더라구요.

그래서 js로 각 요소의 top값과 좌우 위치를 동적으로 잡아주도록 했습니다.

계산식이 복잡했는데, 다시 하라 그러면 못할 것 같아요. 완전 노 to the 가 to the 다;;;

 

- 그리고 각 항목에서 커버이미지, 비디오, 오디오, 아이프레임, 썸네일 등을 가져오고 리스트에서 바로 출력 가능하도록 해봤습니다. 확실히 뭔가 더 역동적인 게시판이 된 것 같은 느낌이에요.

 

- 근데 이렇게 해보니까 또 현타가 살짝 오는데, 타임라인 모양이면 무한스크롤 페이지네이션을 해야 할 것 같고... 그러려면 pjax를 써야 할 것 같고 그러네요.

- 개별 문서들도 리스트에서 항목 클릭을 하면 모달 창으로 ajax로 갖고 온다든가 하면 더 멋질 것 같고요.

 

- 근데 무엇보다 디자인 문제가 심각합니다. 아무리 봐도 안 예쁘거든요ㅋㅋㅋㅋ 기능적인 건 어떻게 해보겠는데... 조언 좀 해주시면 감사하겠습니다!

글쓴이 윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
  • profile
    위젯이 아니라 게시판형 스킨이면 회사 홈페이지 작업 할때 엄청 좋을것 같아요ㅎㅎ
  • profile profile
    네, 타임라인 템플릿을 통해 다양한 표현 방식들이 가능할 것 같아요.
    - 연혁
    - 업무일지 (목록에서 파일 다운로드도 가능하면 좋겠네요!)
    - 흐름도
    - 소셜미디어형
    등등... 이 떠오릅니다 :)
  • profile
    와우 멋지네요 ㅎㅎ
  • profile profile
    아이디어 좀 팍팍 주세요~
  • profile
    와우, 윤삼님 멋지네요 ㅎ
  • profile profile
    모양새만 나온 거고 실사용 가능하려면 한참 멀었어요;;;;
  • profile profile
    ㅎㅎ 모양새만 보고도 넘 신박해서요 ㅋㅋㅋ
    윤삼님 파이팅입니다. 10년뒤에 완성되어도 기다릴 수 있어요 ㅋㅋㅋㅋㅋㅋ
  • profile profile

    이러다 노인정에서 완성하겠어요ㅋㅋㅋㅋㅋ

    물론 그래도 당연히 영광이지만요 ;)

  • profile profile

    ㅋㅋㅋㅋㅋㅋㅋ
    저도 노인정에가서야 레이아웃 배포할 수 있을 것 같습니다. ㅋㅋ

  • profile
    윤삼님은 정말 한줄기 빛이에요! 언제나 응원 합니다!
  • profile profile
    감사합니다;)
    이제 연휴도 끝났으니 작업 속도가 다시 더뎌질 것 같아요 으흐흐