XETOWN

물어보기

조회 수 124 댓글 6

'연혁' 구현을 위해 수평형 타임라인 content 위젯 스킨을 만들어 보고 있는데, (개발 능력은 물론이고) 디자인쪽은 젬병이라 영 마음에 들지가 않습니다. codyhouse의 Horizontal Timeline을 커스텀하고 있구요, 기능상에 제약이 없진 않은데 조심해서 잘 쓰면 나름 쓸 만합니다. 어쨌든 간단히 소개해보면,

 

0. 위젯 컨테이너 윗쪽에 타임라인이 있고, 화살표 좌우키 또는 스와이프로 이동해서 컨텐츠를 보는 방식입니다.

 

1. 일단 가라로 만들어뒀던 게시판을 활용해서ㅋㅋ 제목이랑 날짜를 가운데 박고 양 옆으로 장식을 줘봤는데, 솔직히 잘 모르겠습니다;;; 썸네일은 ratio로 추출했을 때 가로사이즈 비율이 16:9보다 더 넓으면 가운데 정렬로 뽑도록 했구요.

01.jpg

 

2. 그리고 제목 텍스트에 태그가 있으면 색깔이 나오도록 해봤어요. 갑자기 그런 아이디어가 떠올라서;;; 섬네일 가로사이즈 비율이 16:9보다 작은 경우엔 본문 요약 옆으로 나오게 했고 홀수 번째 컨텐츠에선 오른쪽 정렬입니다.

02.jpg

 

3. 짝수 번째 컨텐츠에선 섬네일이 왼쪽으로 정렬되구요.

03.jpg

 

4. 모바일로 보면, 반응형이어서 섬네일이 다시 가운데로 정렬...

05.jpg

 

... 대강 이런 식입니다. 원래 소스 자체가 단순한 형태여서 커스텀 자유도가 높은 편이긴 한데, 제가 우둔해서 만족스럽지가 않네요. 몇 일 동안 붙잡고 있었더니 스스로 생각하기도 뭔가 버겁구요, 하.하.하.

색감이라든가 배치 형태 등 디자인 관련해서 의견이나 조언 주시면 연구해보고 능력 닿는대로 반영해보겠습니다. 그럼, 부탁 드려용~

  • profile
    오징 2016.06.15 02:24:13
    우왕~ 무료포인트마켓에 있는 수직형 타임라인이랑은 또 다른 느낌이네영
    개인적으론 수직형보단 수평형이 더 깔끔(?)한 느낌? (디자인말고 구성이랄까.. 수직형은 길어지는거 같아서..)

    전 디자인 씜플해서 좋은데ㅋ
    수직형처럼 추가로 프로필이미지도 넣으실껀가요?
  • profile
    윤삼 2016.06.15 02:29:34
    어디다 넣어야 좋을지 모르겠어요 ㅎㅎ 머리가 안 굴러가요~
  • profile
    proto 2016.06.15 13:31:16
    오홋~! 좋습니다

    색은 조금 발랄한 색을 쓰시는게 더 예쁠 것 같네요! 살짝 칙칙한 감이 있어서..

    배치 같은건 고민 많이하신 흔적이 보입니다 ㅎ
  • profile
    윤삼 2016.06.15 13:47:27
    음, 그러네요. 특히 상단의 타임라인 자체가 그런 느낌을 주는 것 같네요. 시간 날 때 얘도 뜯어고쳐봐야겠어요ㅎㅎ 감사합니다~
  • profile
    기진곰 2016.06.15 14:50:11

    수직형은 아래로 스크롤하기만 하면 여러 개의 항목들을 순서대로 볼 수 있는데, 수평형은 항목 수가 많아지면 좌우 화살표를 누르거나 좌우로 스크롤하거나 스와이프해야 하니 살짝 불편한 감이 있어요. 특히 항목당 내용이 많아서 좌우 스크롤과 상하 스크롤을 함께 사용해야 하는 경우 대략 난감...

     

    수평형을 사용하면서도 이 부분을 확실히 해결할 수 있다면 대박일 것 같아요.

  • profile
    윤삼 2016.06.15 20:36:27
    화살표 키를 누르면 이벤트 시점의 포인트로 이동하고, 상단의 화살표 이미지를 클릭하면 타임라인 구간의 선 전체가 이동하는 방식이어서, 이벤트가 여러 개일 때 생길 수 있는 상황에 대해서는 원 제작자도 고려를 하긴 했던 것 같아요. 다만, 사이트 이용자가 이 부분을 직관적으로 알아채고 사용할 수 있도록 디자인을 고민해봐야겠네요.

    PC 버전은 반응형이니까 좌우 스크롤바가 생기는 일은 없으니까 괜찮은데, 모바일에서 스와이프와 상하 스크롤이 서로 간섭하는 건 (능력 밖의 문제긴 한데) 한번 연구를 해봐야겠구요. ^^

    조언 감사합니당!

서버에 요청 중입니다. 잠시만 기다려 주십시오...