[파이널 판타지14] - 온라인 갤러리🖼️, 그 두 번째

오랜기간 파판14를 플레이 하면서 여기저기서 받은 그림들이 꽤 많은데,

다년간 쌓이고 쌓이다보니 따로 모아서 정리를 해 두면 좋겠다 싶었다.

 

블로그에 정리를 해둬도 되겠지만, 그보다는 그림만 따로 모아 놓은 사이트를 하나 만들면 좋겠다는 생각에

몇 달 전부터 막연하게 생각만 하고 있던 계획을 요 며칠간 뚝딱뚝딱💻 작업해봤다.

프로젝트 시작부터 완성까지 일주일 정도 걸렸는데, 틈틈이 작업했으니 아마 제대로 작업한 시간만 치면 사흘-나흘 정도.

 

이번 포스팅은 그 과정을 포함한 제작 후기와 완성된 사이트 소개.

제목에 적혀있는, 어째서 '두 번째'인지는 본문에서 설명할 예정.

---

Jaicy's gallery

▶ https://jaicychoi.github.io/ArtGallery/ ◀

 

---

우선은 아이디어 훔치기벤치마킹 부터.

 

사진/그림을 모아보기 좋은 디자인은 어떤 것이 좋을지 비슷한 사이트들의 디자인을 탐색, 괜찮은 사이트들이 있으면 참고했다.

---

디자인하기.

 

탐색을 마치고 어느정도 머릿속에 대략적인 디자인이 그려졌다면 본격적인 디자인 작업 시작. 당연하지만 새하얀 백지부터 시작이다😇.

짠- 그림만을 보여주는 목적인 단순한 기능을 가진 사이트이기 때문에 복잡한 디자인은 되도록 피하고 심플하게 보이도록 디자인했다. 디자인을 그대로 코드로 구현하는 작업 도중 다소 변경된 부분이 있지만.

사실 좀 더 고급지게 만들고 싶었는데, 역시 디자인 전문은 아니라 그런지 사이트 만들 때마다 느끼고는 있지만 생각보다 쉽지 않은 편😂.

---

코드짜기(구현하기).

앞서 디자인 한 것을 그대로 코드로 구현하는 작업.

가장 시간이 많이 걸리고 간혹 생각대로 안풀리면 꽤 머리아픈 일이다😣.

 

예를들어, html로만 사이트를 구현하면 '이게 뭐야?'싶지만...

CSS를 넣어주면, 얍-! 바로 위의 텅 빈 하얀 화면이 이렇게 근사하게(!) 바뀐다😊.

CSS 뿐만 아니라 어딘가를 클릭하거나 마우스를 올리거나 했을 때의 동작을 제어하는 JS 작업까지 작업해주면 완성👍.

 

모듈화도 안하는 등 정리가 안돼서 다소 어지럽지만 어차피 나 혼자 관리하는 사이트니까 아무래도 상관없다. 으하하핫-😁

---

완성!

포스팅으로는 굉장히 간단하게 완성한 것 처럼 보이지만 처음보는 에러도 직면하고 꽤 다사다난했다😅.

 

완성된 사이트와 디자인 단계를 조금만 비교해보면 아래와 같다.

 

디자인 단계의 메인 화면. 배경으로 사용한 이미지는 내 개인주택 1층의 모습이다. 내가 상상한 갤러리 느낌이 물씬 드는 것이, 사이트와 잘 어울리는 듯 하여😏.

실제 메인 화면. 'WELCOME'의 폰트 크기가 좀 더 커지고 좌측 메뉴에 분홍색 그림자가 은은하게 들어갔다. 그리고 메뉴 하단의 관련 사이트(?) 목록에 아이콘이 하나 더 추가되었다.

디자인 단계의 서브 페이지. 디자인 단계처럼 그림을 좀 더 자유로운 느낌에 다양한 크기로 배치하고 싶었는데...

실제 코드 작업을 해보니 생각했던 것 보다 영 느낌이 별로인데다 브라우저의 크기를 늘이거나 줄일 때 예쁘게(?) 배치 되질 않아서, 결국 마지막에는 지금 보이는 것 처럼 모두 동일한 크기로 설정하였다.

 

---

사이트를 좀 더 자세히 제대로 자랑소개하면,

 

메인 페이지는 환영하는 느낌의 애니메션이 있으면 좋을 것 같아서 소소하게 효과를 넣어봤다.

메인 페이지의 각 메뉴에 마우스를 올리면, 사이트의 배경이 해당 메뉴와 관련있는 그림으로 바뀐다.

 

참고로 사이트 내부에서는 기존의 마우스 포인터는 사라지고 아주 ✨반짝이는✨ 무언가가 마우스를 따라다닌다. 다만 이건 조금 불편한 감이 없잖아 있어서 추후에 변경될 수도 있다.

 

사이트 프로필 사진을 어떻게 할까 고민하다가 심플하게 라하의 그림자(?) 모습으로 결정, 정성스럽게 누끼를 땄다ㅎㅎ.

어차피 난 라하 커마 고정이고 닉도 '그라하티아'니까 내가 라하지 뭐. 틀린 말은 아닌걸?😏

 

브라우저의 크기에 맞게 보기 편하도록 반응형으로 디자인되었기 때문에 PC부터 모바일까지 커버 가능하다. 사실 반응형으로 만들지 않으면 사이트를 훨씬 금방 만들 수 있다! 반응형이 정말 만만치 않은 작업😂.

 

메뉴는 메인 페이지로 이동하는 'Home'을 제외, 그림을 받은 커뮤니티를 기준으로 분류하였다.

Inven은 인벤에서, SNS는 sns를 통해서, In-game은 인게임에서 받은 그림을 분류해두었다.

In-game은 Atelier와 etc로 나누었는데, Atelier는 화방에서 받은 그림들을 모아두었고 etc는 그 외 개인적으로 받은 그림을 모아두었다.

 

Partner는 언약자가 그린 그림을 모아둔 별개의 사이트로 이동하는데,

해당 사이트에 대해서는 아래의 포스팅[링크]에서 자세히 다룬 적이 있으니 관심이 있다면 참고하길.

참고로 사이트 주소를 언약자의 닉네임이 들어간, 심플한 것으로 이번에 새로 바꿨다 → guiltine.ml

 

[파이널 판타지14] - 온라인 갤러리 완성

첫 번째 온라인 갤러리가 언약자의 그림을 모아둔 사이트여서, 이번에 만든 갤러리가 두 번째인 것. 저 사이트 만들 때도 꽤나 고생했다;

언약자는 근래들어 '내가 아는 범위에 한해서는' 파판14 관련 그림을 그리지 않아서 최근 그림...이랄까 올해 그림은 그다지 없다.

사실 요즘 대화도 거의 안해서 뭐 하고 지내는 지도 잘 모른다. 언약 2년차에 찾아온 이혼 위기😨

 

메뉴 하단의 작은 아이콘들은 내가 운영 중인 연관 사이트나 커뮤니티로 연결되는 것들이다. 궁금하면 사이트에 방문, 직접 클릭해서 확인해보길!😉

 

그림에 마우스를 올리면 해당 그림을 받은 날짜와 그림을 그려준 유저의 닉네임을 볼 수 있다. 그림을 클릭하면 크게보기 가능.

 

---

여담

 

받은 그림을 모아놓은 사이트라고 해도, 모든 그림을 올려놓진 않았다.

공개 범위가 명확하지 않거나 개인 소장만 허락된 그림들은 여전히 로컬 폴더에 고이 모셔두는 중.

잘 그린 그림들인데 계속 빛을 못보는 것이 안타깝긴하다🤔.

 

최근에 받은 그림 중 가장 마음에 드는 그림은,

크으-🤩 흑마느낌 제대로-

처음엔 푸른 화염 버전으로 받았는데, 붉은 화염🔥 버전도 보고싶다고 했더니 금방 작업해주셨다.

MD(Medium Deformation)긴 해도 전신에, 사소한 디테일까지 다 신경써서 그려주신데다 무엇보다 무기!!! 무기까지 그려주셔서 놀랐다.

애용하는 무기가 워낙 복잡한 디자인이라 무기까지 그려주는 분들이 상당히 드문데,

그 점을 잘 알기에 일부러 무기는 이야기 하지 않거나 아예 빼달라고 하는 편😓.

 

그런데! 먼저 무기까지 그려주신다고 제안을 하셔서 감동했는데 이렇게까지 디테일하게 그려주셔서 더욱 감동했다🥰.

심지어 3-4주 걸린다고 했기에 더 걸려도 되니 천천히 작업하셔도 된다고 했건만 러프 포함 나흘?정도 만에 건네주셔서 놀랐다.

 

그림 보고 오늘하루도 힘내기...🥺

 

---

몇 달 전부터 온라인 갤러리를 기필고 만들고 말리라 결심만 세우고 있었건만 드디어 완성해서 기쁘다.

생각을 실제로 구현할 수 있다는 건 참 멋진 일이다😊.

 

혹시 내게 그림을 그려준 적이 있다면 사이트를 방문해서 본인의 그림을 한 번 찾아보는것도?!😉