결과물

여러 모바일 애플리케이션 서비스사의 레이아웃을 참고해 만든 반응형 웹페이지다. 결과물이 나오기까지 우여곡절이 많았지만 그럴듯한 페이지를 만들어서 뿌듯하다.

---

무료 와이파이 홈페이지 만들기 시작🧠

처음 시작할 때 먼저 디자인에 대해서 고민했었다. 와이파이와 어울리는 디자인이 과연 뭘까 여러 사이트를 찾아보며 영감을 얻으려고 노력했다. 그러다가 여러 사이트에 몇 가지 공통점을 알게 되었는데. 대표적으로,

• 원하는 콘텐츠를 보기까지 클릭의 횟수가 적었다.
• 한 페이지 내에서 모든 콘텐츠를 적절하게 보여주고 있다.
• 모바일로 봤을 때 텍스트보단 이미지로만 간략하게 보여주고 있다.
• 화면을 구성하는 컬러는 3개 이하이다.

이 기준을 토대로 디자인을 구성하였고 다른 직원분들께 조언을 얻고자 프로토 타이핑을 만들기 시작했다.

---

프로토 타이핑

프로토타이핑이란 개발자들과 사용자들의 의사소통상의 효과를 증진시키기 위하여 취하는 시스템개발상의 기법이다. 프로토타이핑 기법을 수행할 때 중요한 점은 개발자와 사용자간의 상호이해 및 지식교환을 위한 작업이라는 점을 명심해야 한다. 일반적인 분석방법을 취할 경우 양자간에 서로 다른 이해를 가져올 수 있으므로 프로토타입이라는 의사소통 도구를 만들자는 것이다.
출처: https://unions5.tistory.com/65 [시시콜콜한 세상사]

프로토 타이핑을 만들기 위해 디자인 툴을 선정해야 했는데. 내가 채택 할 수 있는 경우의 수는 세 가지가 있었다.

• 피그마
• 재플린
• 어도비xd

고민하던 중 다른 직원분들의 컴퓨터에서도 별도의 설치 없이 일관성 있게 볼 수 있도록 재플린으로 공유하자고 생각했다.

그렇게 작업이 시작되고, 시간이 지나 바로 문제에 봉착하게 되었다. 그 문제는 바로 이미지 파일이다.
홈페이지를 개성 있게 꾸미기 위해선 필요한 이미지가 있어야 하는데 이 이미지가 없는 것이다.!!!
평소에 디자인 툴과는 거리가 멀었던지라 사용법을 익히는 데에도 며칠씩이나 걸렸다.(포토샵 너무 무겁다ㅠ)
그렇게, 포토샵과 일러스트레이터를 사용해서 겨우겨우 이미지를 하나씩 만들어가기 시작했고 홈페이지를 만들기 위한 재료는 전부 준비가 된 상태에서 드디어 재플린을 사용하게 되었다.

이 경험을 통해 디자이너라는 직업이 존재하는 이유를 간접적으로나마 이해할 수 있었다. 디자이너분들 존경합니다.ㅜㅜ👍

---

성의있는 질문이 좋은 답변을 얻는다.🙏

개발에 관련된 학습을 하면서 가장 낯설었던 부분 중 하나인 질문하는 방법에 대해서 이야기해본다.

어렸을 적 학교에서 선생님께 도움을 요청할 때 "xxx을 모르겠어요ㅜㅜ" 라는 짧은 질문을 통해 답을 얻으려고 했었다. 언제부터 이런 습관이 나에게도 있었는지...? 천천히 기억을 따라가다 조금이나 계기가 있었던 점을 찾을 수 있었는데.바로 한국의 교육체계 안에서는 짥은 질문에도 답변을 얻었기 때문이 아닌가 생각한다.
항상 누군가에게 조언을 받을 때에는 구체적이고 어떠한 상황에서 무엇을 하려고 하는지. 상대방이 이해하기 쉽도록 해주는 것이 바람직하다. 왜냐하면 나를 위해 시간을 써주는 조언자에 대한 최소한의 예의이기 때문이다.

재플린으로 작성한 이유도 큰 맥락에서 나를 위해 시간을 써주는 직원에 대한 예의이다.

어떤 것을 선택할까?🤨

직원들의 피드백도 받았고 이제 코딩 할 순간이 왔다. 코딩에 앞서서 먼저 어떤 식으로 개발할지에 대해서 로직을 생각해 봤다. 고려해야 할 점은 크게 다섯 가지가 있었다.

• 무료 배포 사이트를 이용할 것.(네틀리파이,깃헙페이지스)
• 정적 페이지인 만큼 가볍게 만들것. (SSR)
• 라이브러리 사용 안하기(only 바닐라 자바스크립트).
• 반응형 작업 (데스크탑,태블릿,모바일).
• 반복되는 곳은 OOP 적용 (객체지향 프로그래밍).

좀 더 구조적으로 개발할 수 있는 방법은 리액트이나 홈페이지 특성상 최대한 가볍게 만들기 위해 CSR(클라이언트 사이드 랜더링) 보다는 SSR(서버 사이드 랜더링)이 더 어울린다고 판단하여 HTML, CSS, JAVASCRIPT로만 사용해서 구현을 목표로 잡았다.

Let's Hacking🤖🤖🤖

HTML 파일의 일부분이다.

셀렉터의 이름을 짓는 방법론 중 하나인 BEM을 채택. 그리고 최대한 의미 있는 태그를 쓸려고 노력을 많이 했다. 그리고 다른 개발자들이 볼 수도 있다고 생각해 최대한 주석을 직관적으로 쓸려고 했다.

---

CSS 파일의 일부분이다.

반복을 피하고 유지보수성을 생각해 초기 글로벌 셋을 탄탄하게 잡고 시작했다. 그런데도 반응형까지 대응하기 위해 CSS 코드가 무려 1000줄이나 되었다는 게... 쉬우면서도 어려운 CSS.

---

JavaScript의 일부분이다.

단순히 DOM을 제어하기 위한 함수들이다. 역시 단순한게 좋다.

만들면서 알게된 것들

---

반응형 웹페이지는 구글에서 SEO를 극대화 시킬수 있는 방법으로서 권장하고 있었다. 그래서 데스크탑, 태블릿, 모바일에 전부 다 대응할 수 있도록 CSS 미디어 쿼리를 만지기 시작했는데 블로깅을 하면서 알게 된 것들이 있다. 반응형의 개발 방법론 중 모바일이 중점이 되는가, 혹은 데스크탑이 중점이 되는가에 따라 탑-다운 & 다운-탑 방식으로 대응을 할 수 있도록 설계해야 했다. 실제 유저를 대상으로 한 반응형 웹은 처음이어서 꽤 시간이 오래 걸렸다. (이거 완전 노가다...) 다른 개발자분들은 데스크탑에서 보여줄 수 있는 웹페이지와 모바일에서 보여줄 수 있는 웹페이지를 따로 만들어서 작업 하는게 더 편하다고 했지만. 웹페이지가 분리된다면 SEO의 데이터들이 분산되는 걸 알기에 반응형 제작에 고집을 피웠다. 또한 크로스 브라우징 이슈에 대해서 말을 안 할 수가 없는데 크롬 브라우저의 DOM API와 사파리에 DOM API가 다른 걸 확인하고 고민에 빠졌다. 어떻게 하면 유저들이 다양한 환경에서 일관적인 컨텐츠를 제공 받을 수 있을까? 여기서 유저의 브라우저를 변수에 담을 수 있는 폴리필 코드를 통해 각 브라우저의 동작을 나누어 놨었다. 혼자 개발하다 보면 다른 브라우저에 관한 생각은 잘 하지 않는데 회사 동료들의 피드백을 통해 실제 유저와 인터랙션을 할 수 있었던 좋은 경험이었다고 생각한다.