[💬] (수정) 팀 홈페이지 리뉴얼 작업, 그리고...

안녕하세요.

이번 주는, 완전히 개발을 배제하고 저희 팀 내부에서 필요하다 느낀 점을 홈페이지에 반영하는 작업을 진행했습니다.

이번 주에는 애니메이션 몇 장 정도...

그리고 개인적인 사정으로 인해 6월, 한 달 동안 개발을 진행하지 못하게 되어 불가피하게 6월 동안은 잠시 개발일지도 휴재하기로 했습니다.

홈페이지 리뉴얼

저희 팀의 운영 방향이 지금까지 게임 개발이 중심이였습니다.

하지만 이제부터 더 다양한 분야를 위시하기 위해 컨텐츠 창작으로 범위를 확대하기로 결정했습니다.

6월 리뉴얼 이전의 홈페이지는 상당히 무거웠습니다. (로드가 느림)

이유는, 모든 페이지를 한 페이지에 표시하고 있었기 때문이였죠.

이제 팀의 운영 방향을 반영하기 위해, 카테고리별로 프로젝트를 나눠 표시하기로 결정하고

프로젝트 목록도 페이지 별로 볼 수 있게끔 디자인을 변경하기로 했습니다.

지금까지 쓰던 것은 프로젝트가 많아질 수록, 관리하기 어려운 문제점이 있었지만

이제 아래와 같은 식으로 디자인을 개선하게 되면서 그 문제가 해결됐습니다.

개선된 디자인 초안

카테고리 버튼은 css를 활용해서 selected, :hover 를 이용해 선택된 상태를 구현했습니다.

또, 무거운 페이지를 가볍게 만들기 위해 페이지를 모두 분리하는 작업을 시작했습니다.

모든 프로젝트의 정보들을 처음에 분리한 모습, 나중에 가서 모두 개별 파일로 분리가 되었다.

카테고리 목록을 반응형에 맞게 개선한 모습

그리고 이제 본격적으로 구상한 디자인을 구현하기 위해 필드를 만들었습니다.

필드를 만든 모습, 역시 반응형에 맞게 디자인 또한 개선했다.

필드에 데이터를 입력한 모습, 각 정보의 맨 마지막은 잘못 넣은 데이터다.

프로젝트 목록도 이제 페이지별로 나눠서 표기해야 하기 때문에, 불러오는 방식 역시 새로 만들어야 했습니다.

인덱싱 된 프로젝트 목록을 페이지 번호에 맞게 표시하는 모습.

이제 페이지를 직접 찾아볼 수 있게 페이지 번호를 추가합니다.

작업 과정

이것 역시 카테고리 목록에서 사용했던 방법을 활용했다.

그리고 사진을 불러오지 못한 상태에서 표시가 되지 않는 것을 방지하기 위해 비동기 작업으로 개선했습니다.

비동기 로드

이제 프로젝트 페이지를 별도의 페이지로 나누는 작업을 진행했습니다.

역시 비동기 로드를 이용해 페이지를 불러오고 있음을 보여준다.

그런 다음, 팀원 정보 페이지를 나누는 작업을 진행했습니다.

하지만 이 페이지에는 참여한 프로젝트의 목록을 표시하는 필드가 있었고, 이것도 똑같이 카테고리를 만들어서 표시해줘야 했습니다.

데이터를 적용 한 모습

그러다가 소개글에 사용되는 유튜브 임베드가 무겁다는 것이 기억났습니다.

특히 IE(...)에서 iframe의 내용을 불러오기 전 까지 상호작용을 할 수 없다는 게 큰 걸림돌이였죠.

모바일은 문제가 없지만, 불러오는 데 많은 자원이 소모됩니다.

그래서 미리보기와 재생 버튼만 먼저 표시하고, 클릭을 하면 유튜브를 불러오거나, 유튜브로 이동하게 만드는 것으로 부담을 줄였습니다.

내용을 불러올 때, 파서에서 유튜브 데이터 태그를 가져와 내용을 만드는 것으로 구현했습니다.

이렇게 쓰면

이렇게 나온다, 모바일에서 클릭하면 유튜브 주소로 이동한다.

마지막으로, 페이지 내용을 보완할 겸, 일부 사진이나 문서를 추가하거나 수정하는 작업도 진행했습니다.

작업 사진들...

프로젝트 페이지 추가

개발은 진행하지 못했지만...

이번에 홈페이지 개선을 진행하면서 꽤 시도하길 잘 했다 라는 생각을 많이 하고 있습니다.

이와는 별개로, 위에서 언급했듯이, 개인적인 사정으로 인해서 6월 동안 개발을 진행하지 못하게 됐습니다.

커밋도 비어질 생각을 하니 슬프네요...

7월에 돌아오겠습니다.

[💬] (수정) 팀 홈페이지 리뉴얼 작업, 그리고...

댓글 4

다른 게시글