포트폴리오 사이트 제작기 (디자인, 개발, 다크모드 지원)

[사용 기술]

- 디자인 : Figma, Photoshop, Illustrator

- 프론트/백엔드 : HTML, CSS, Javascript, Ajax, PHP, JSON

---

포트폴리오 사이트를 리뉴얼 했다. 이전 버전도 그리 오래되지 않아서 톤은 유지하되 원페이지로 제작했다. 디자인은 최근에 유행 중인 Notion 포트폴리오 스타일에 꽂혀서 흰색 배경에 심플하게 만들었다.

 

원페이지로 전환한 이유는 스크롤 몇 번이면 사이트를 다 볼 수 있도록하기 위해서다. 이 사이트는 입사지원 제출용으로 만든 것이라 방문 목적이 보통의 사이트와는 다르다. 방문자는 바쁜 업무시간을 쪼개어 들어왔을 것이며 최대한 빨리 보고 이탈하고 싶어한다. 아무리 메뉴에 좋은 내용을 많이 넣어도 클릭 조차 하지 않는 메뉴도 있을 것이다. 따라서 메뉴는 2개만 남겼고 작업물 갯수를 대폭 줄여서 메인에 노출했다.

 

 

---

| 디자인

 

1. 헤더 메뉴

 

원페이지이지만 상단 메뉴는 유지했다. 이 사이트가 총 몇 개의 메뉴를 가졌는지 알려주는 사이트맵 개념으로 남겨두었다. 메뉴 모양은 기능에 따라 2종류로 분류했다. 하단으로 스크롤 이동하는 About과 Portfolio는 텍스트메뉴로, 외부사이트로 이동하는 Blog는 버튼 모양으로 디자인 했다.

 

 

2. ABOUT

예전에는 몇 일을 고심해서 만든 소개멘트를 넣거나 인포그래픽을 넣기도 했는데 결국은 읽기 쉬운 개조식으로 작성 했다. 오랜 세월을 걸쳐 사람들이 많이 써온데는 이유가 있고 이력서, 경력기술서 is 개조식은 진리라고 생각한다.(...)

기존 이력서 양식에서는 뿔뿔이 흩어져 있어서 개연성 없게 보이던 정보를 한군데에 몰아서 강조 했다. 그 외 지금 공부하고 있는 것과 목표 등은 Notion에 작성 후 링크를 걸어서 활용했다.

 

 

3. PORTFOLIO

썸네일 위에 마우스 롤오버시 색깔 배경 필터가 깔리고 그 위에 제목이 노출되게 제작했다. 카테고리별로 롤오버 색은 다르게 했다.

---

 

 

| 퍼블리싱

 

1. 반응형 디자인

모바일, 태블릿 & 좁은 모니터, 와이드 모니터 총 3가지 중단점으로 제작했다. 아이패드와 해당도 1400px 이하 모니터에서도 쾌적하게 보이도록 디자인 단계에서부터 고려했다.

 

 

2. 원페이지 제작 시 고려사항

1. 한 섹션당 화면 높이 이상 넘지 않게 할 것 (포트폴리오 메뉴 제외)

2. 스크롤 인터랙션 활용하기

 

컨텐츠가 늘어지지 않도록 구성하고 빠른 이동을 위해 스크롤 이벤트를 활용했고 내용이 많은 About 메뉴는 하단에 more 버튼을 넣어서 펼쳤다 접었다 할 수 있도록 했다.

 

 

3. 로딩 속도 최적화

1. 이미지 사용을 줄이고 SVG 사용

2. 불필요한 소스 제거

3. 여러 개로 쪼갠 CSS를 1개 파일로 합쳐서 적용 (어셋이 많을수록 서버에 요청횟수가 늘어남)

 

최초 접속 화면에서 컨텐츠를 한꺼번에 불러와야 하기 때문에 로딩 속도는 무엇보다 중요하다. 최초 접속이 느리면 방문자는 이탈할테니 말이다. 이렇게 해서 줄인 용량은 400 kb 정도인데 보통의 대한민국 인터넷 환경에서 400kb가 큰 차이는 없겠지만 와이파이가 빠르지 않은 회의실에서 노트북을 사용할 수도 있다는 가정 하에 용량을 최대한 줄였다.

 

 

4. 다크모드 지원

최근 다크모드 사용자가 꾸준히 늘어나고 있어 유저의 선택권을 고려하여 다크모드도 제작했다. 다크모드는 CSS 미디어쿼리 @media (prefers-color-scheme: dark) 로 손쉽게 제작이 가능하다. 이 때 이미지를 <img>로 넣게 되면 CSS로 제어가 불가능하다. 선, 버튼 같은 GUI 요소는 CSS로 구현하고 이미지도 background에 적용하는 것을 추천한다.

 

+) 2020/12 추가 - 다크모드는 오리지널 버전과 톤앤매너가 너무 따로 놀아서 일단 사용을 중지했다.

 

---

 

 

| 지옥에서 돌아온 자바스크립트

화이트 디자인에 원페이지인만큼 재미없게 보이지 않도록 인터랙션을 활용했다. 구현을 위해서 6개월은 손 놓고 있었던 자바스크립트를 다시 들춰보아야 했고 기능 서너개를 만들기 위해 3일은 삽질을 해야 했다.

 

구글링 → 단서 발견 → MDN, W3C 문서 읽기 → 응용 → 실패 → 구글링 → 알고보니 다른 프로퍼티였음 → W3C 문서 읽기 → 응용 → 실패 → 구글링 (무한반복)

 

그리하여 얻은 것들은,

 

1. 그동안 포기했던 콜백에 대해 이해함.

2. 스크롤을 스무스하게 만드는 Scroll()의 behavior: smooth 라는 보물을 얻음. 하지만 IE에선 쓸모없지
3. 현재 스크롤 위치 절대값을 구하는 방법

4. 정수 반올림하는 방법

 

[참고글] 자바스크립트 정수 올림, 반올림, 내림하기

 

정수 반올림은 About 페이지의 목표달성 그래프에 활용했는데 각 목표별 value 값을 입력하면 자바스크립트로 퍼센티지 숫자와 그래프 이미지가 출력되도록 개발 했다.

 

테스트 결과 크롬과 엣지에서는 문제가 없는데 IE 11에서는 스크롤이 작동하지 않는다. 작업물을 보는데는 문제가 없어서 그냥 두기로 했다. 점유율이 1%도 안 되는 익스플로러 때문에 전체 인상을 좌우하는 스무스 스크롤을 포기할 수 없었다.

---

 

| PHP에서 JSON 활용하기 (JSON 파싱)

포트폴리오 본문 보기는 JSON 데이터를 파싱해서 호출할 때마다 PHP가 화면을 그리도록 구현했다. 이 방법으로 바꾸고 JSON에 데이터만 입력하면 자동으로 화면을 그려주어서 아주 편해졌다. 일부 페이지는 디자인을 템플릿화하기가 어려워서 각각 개별 페이지로 만들었는데, 이 경우는 JSON을 활용하지 않고 if문으로 해당 PHP파일을 include() 했다. 결과적으로 한 페이지씩 수동으로 만들었던 20개 페이지를 3개로 정리 했다.

 

JSON를 PHP으로 파싱하는 방법은 다음과 같다. 예를들어 data.json이라는 파일을 가져온 뒤 json_decode()로 변환한다.

$get_json = file_get_contents('./data.json');
$json_data = json_decode($get_json, true);

 

JSON은 아래와 같이 작성했다.

{
  "work" : {
      "id" : "work",
      "cateid" : 2,
      "type" : "auto",
      "title" : "디자인프로젝트",
      "cate" : "UI/UX",
      "info" : "Design 100%", 
      "date" : "2020",
      "desc" : null,
      "thumb" : "/img/thumb/img.jpg",
      "img" : "<img src=\"/img/project/img.jpg\">"
    }
  }

예를들어 work라는 오브젝트라고 하자. 작업별로 오브젝트를 만들어서 PHP로 파싱하면 PHP 오브젝트가 되는데 GET 방식으로 ?id=work id와 오브젝트 id가 맞는지 체크해서 해당하는 오브젝트의 title과 img 등을 화면에 뿌릴 수 있다. 이렇게 하면 view.php 파일 1개만 만들어도 각각의 본문 페이지가 자동으로 그려진다.

 

[참고글] JSON이란 무엇인가, 왜 써야 하는가

 

 

 

이상 개발의 ㄱ자만 가지고 얼기설기 만든 디자이너의 사이트 제작기였다. NoSQL방식인 JSON 데이터 활용 방법은 이게 아닐 것 같지만 이전 버전보다는 훨씬 효율적이라 만족한다. 아쉬운 점은 비동기의 장점을 완벽하게 살리지는 못했다는 점. 하지만 나는 개자이너가 될 것도 아니기에 원시적인 방법으로라도 의도대로 구현한 것에 만족해야겠다.