개요

어쩌다보니… React를 공부하게 됬고, 그에 맞추어 사이트 디자인을 “아주 약간” 공부하게 되었다. 누군가에게는 도움이 될까 해서… 생초보의 프론트엔드 작업 내용을 정리해봤다.

HackRSS?

HackRSS는 컴퓨터 보안(쉽게 말해 해킹)에 관련된 정보들을 수집해서 사용자들에게 보여주는 서비스이다. 초기 기획에 나도 참여했었고, 중간에 잠깐 다른 일이 있어 빠졌다가 다시 시간이 나서 지금 상태에서 개선 작업에 참여하게 되었다.

현재 상태 점검

기존의 HackRSS는 RSS라는 이름에서 알 수 있듯, RSS 관련 서비스중의 최고인 Feedly를 벤치마킹해서 개발하였다. 그러다보니 기능적으로는 Feedly와 차이점이 분명 존재하지만 디자인적으로 개선하여 우리만의 색을 만들기는 어려웠다.

물론 Feedly에도 기존의 HackRSS에도 문제는 많다. 당연히 우리가 더 문제 덩어리다. 기획을 제대로 하고 만든 서비스가 아니라, 프로토타입 정도로 개발한 서비스(거의 1인 개발)라 여러가지 문제점들이 있었다.

개선 작업에 참여하며 여러가지 문제점들을 확인하며, HackRSS에서 중점적으로 내세울 기능들을 선별하여 이를 강조하는 형태의 디자인을 해보기로 했다.

디자인 갈아엎기!

자 그럼 이제 문제점도 파악했고, 핵심 기능에 대한 선별도 끝냈다. 그럼 프론트 디자인은 어떻게 해야할까? 나는 UI/UX 설계나 디자인과는 거리를 두고 살았다. (대학에서도 수업 한번 들은 적 없다.) 어떻게 해결을 해야할까 막막하던 와중 Velog에 Velopert님이 올리신 “벨로그 홈에 그리드 뷰 되살리기 1편: 문제 확인과 벤치마킹”라는 글을 보게 되었다.

그리드 뷰?

네모난 화면의 네모난… 세상…이 아니라, Feedly의 Card View와 같이 격자 모양으로 배치를 해서 사용자에게 보여주는 걸 그리드 뷰라고 하는 것 같다. 생각보다 많은 사이트들에서 그리드 뷰를 사용하고 있고, HackRSS에서도 이를 활용하면 좋을 것 같았다.

여러 사이트들을 둘러보자!

이제 그리드 뷰를 활용하자는 방향을 정했으니, 다양한 사이트들을 돌아보며 디자인 컨셉을 정해보기로 했다. 일단 “벨로그 홈에 그리드 뷰 되살리기 1편: 문제 확인과 벤치마킹” 사이트에 올라와있는 참고용 사이트들부터 둘러보았다.

Velog와 비슷하게 텍스트 위주의 서비스를 개발할 예정이라, 역시 이미지 위주로 서비스 하는 곳들은 대부분 제외했다. 그렇게 둘러보고 남은 사이트들이 Velog, Surfit, Feedly 정도였다.

특히, Surfit이 매우 인상깊었다. 이미지가 존재하지 않을 경우에도 적절한 비율로 컨텐츠를 보여주면서도, HackRSS에서 추가하려던 기능(태그, 북마크)등도 이미 서비스 하고 있었다.

이런 사이트들에 덧붙여 모바일 UI/UX도 여러 커뮤니티 사이트들이나 국내 메이저 웹사이트를 둘러봤다.

2단 레이아웃의 꿈

기존의 디자인에서 확인할 수 있듯이, 원래는 2단 레이아웃을 사용하고자 하였다. 서비스 특성상 RSS 컨텐츠들을 정리해서 본인만의 아카이브로 만드는 것을 중점적으로 생각하고 있었기 때문이다.

그런데 이게 쉽지 않다는 것을 보았다. 그래서 깔끔하게 포기했다. 개발 경험치가 더 쌓이면 그때 도전하리…

새로운 디자인 적용

자 그럼 이제 둘러볼 만큼 둘러봤고 새로운 디자인을 그려볼 시간이다. 나는 이 작업에 Figma를 사용했다. 기본적인 포토샵 기능을 사용할 줄 아는 상태여서 사용법도 단축키도 비슷해서 사용하는데 편리했다.

연습작

사실 이렇게 2단 레이아웃을 바탕으로 가안도 그렸었다. 위에 깔끔하게 포기했다고 했는데 사실… 해보고 맘에 안들어서 포기했다. 정말 어렵더라. 그냥 묻어두기엔 아까워서 같이 올렸다.

PC 버전

최종본은 결국 1단 레이아웃을 사용하였고, 사용자들이 주로 이용해야할 기능들을 전부 사이드바로 이동시켰다. 어떻게 보면 사용자 입장에서 본인이 직접 아카이브한 RSS 컨텐츠들을 확인하기 위한 과정이 늘어났지만, 전문적으로 배운 사람이 아니라 당장은 이게 최선이었다.

모바일 지원

모바일 화면을 보면 알겠지만, 사실 모바일 시안을 그리고 그 시안을 바탕으로 PC 시안도 그린 형태다. PC 시안이 마음에 들지는 않지만… 시간적 여유가 없어서 우선적으로 하나를 그리고 이에 맞추어 작업했다.

다크모드?!

요즘 다크모드가 대세고, 나도 즐겨 이용하고 있어서 물론 시안은 그려놨지만… 개발을 얼마나 빨리 할 수 있을지 모르겠어… 여기엔 적지 않았다.

끝

사실 여기까지 적고 생각해보니 결국은 Velopert님의 “벨로그 홈에 그리드 뷰 되살리기”가 너무 좋았다는 결론의 글이 된 것 같다. 근데 진짜 도움이 많이 됬다. 나와 같이 프론트 개발을 안해봤는데 해야한다면, 꼭 읽어보고 시작하기를 추천한다!

이제 다음편은 이렇게 야매로 만든 나의 디자인을 React로 구현하는 편이다.

참고자료

8-point 그리드로 디자인하기 디자인을 하면서 아무 생각 없이 디자인을 했는데, 8의 배수로 작업해야한다는 좋은 글이 있어 참고자료에 같이 남겨뒀다.