쇼피파이 홈페이지 제작기03 : Pages & Navigation

어느 정도 예상은 했지만, 쇼피파이(Shopify)는 아무래도 쇼핑몰 사이트이다 보니, 페이지(Pages)의 텍스트 에디터가 생각보다 많이 좋지 않았습니다. 

 

그런 와중에도 사이트가 반응형웹으로 만들어져 있어서,  아래처럼 이미지로 딱 만들어서 붙여놓으니, 영 보기 좋지 않았습니다. 모바일 해상도에서는 텍스트는 크기를 동일하게 유지하지만, 이미지는 크게 축소가 되어서, 이미지로 들어간 글자 크기가 매우 작아져서 가독성이 나빠졌기 때문입니다.

왼쪽 : Web / 오른쪽 Mobile

 

그래서 고민고민하다가 장롱 깊은 곳에 넣어두었던 저의 낡은 HTML/CSS 능력을 꺼내보기로 했어요. 이쯤되면 IT인들은 짐작되겠지만, 10년 정도 지나는 동안 이 분야에는 많은 변화가 있었거든요. 새로 공부할 게 많을 것같다는 생각에, 부분적으로는 직접 수정하기는 했지만 페이지 전체를 처음부터 코딩하는 것은 시도하지 않았습니다. 코딩을 안하기 시작한 것은 정확히는 15년도 더 넘었으니까요. 헐.

 

그래도 다시 용기를 낸 것은 역설적으로 내가 TABLE을 많이 쓰던 IT 세대라는 점입니다. 가끔 요즘 코딩을 들여다볼 때마다 느낀 점은

'세월 좋아졌네, 겁나 쉬워졌자나?'

였거든요. 두어가지만 개선하려는 것으로 집중해서 만들어보면 크게 어렵지 않을 거라고 판단했습니다. 다양한 웹브라우저와 기기들에 적응하려고 나온 솔루션이 반응형웹이다보니, 쓸 수 있는 규칙들이 태생적으로 몇개 없어 보였거든요. 조상급 IT인의 관점으로는 말이죠. ㅎㅎㅎ "라떼에는" 여러 상황에 다 맞추려고 정말이지 개 구질구질하게 여러 예외 적용 규칙들이 드럽게 많았습니다. 그런데 요즘 코딩은 그런 게 거의 싹 다 사라진 느낌이더군요. 그래서 div 규칙 관련해서 최소한으로 몇개만 사용해서 완료하기로 마음을 먹었습니다.

 

이 부분은 내 예상대로 맞았지만, 결과적으로는 생각보다 많은 시간이 걸려서 완성하게 되었습니다. 어려운 부분은 엉뚱한 곳에서 나왔죠. 쇼피파이의 텍스트 에디터가 워낙 안좋다보니, 본의 아니게 하드코딩을 내 평생 처음으로 하게 되었다는 점입니다. 어쩌면 일반적인 하드코딩보다 더 힘들었다고 할 수 있겠네요. 노트패드같은 에디터가 아닌, 레알 텍스트 에디터에서 하나 하나 적어나가느라 눈알 빠지는 줄 알았습니다. ㅋㅋ  신입 웹디자이너로 일할 때도 하드코딩을 해보지 않았는데 말이죠. 코딩할 때는 추억의 드림위버 같은 걸 썼던 터라, 하드코딩을 해야한다는 상황에 직면 했을 때는 많이 당황했습니다.

 

그럼에도 완성할 수 있었던 것은 요즘 반응형웹 코드들이 워낙 단순했기 때문입니다. 그래도 눈은 마이 아팠어요. ㅠㅠ

 

각설하고 제가 쓴 코드 몇개 공유해보겠습니다.

정보를 전달하는 글자들 크기는 웹과 모바일 모두에서 가독성을 유지하도록 하는 부분만큼은 개선하는 점에 중점을 두었습니다. 아래 보기와 같이 페이지의 가로폭 크기의 변화함에 따라 컨텐츠들이 자동 줄바꿈이 되도록 만들었습니다.

<div style="display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap;"> : 전체를 감싸는 div
<div style="text-align: center; width:350px; padding:20px 40px;"> : 개별 내용을 감싸는 div

 

flex :  플렉시블한 정렬

1. flex-direction : 정렬 방식을 정의합니다.
 - row : 가로 정렬 (row-reverse : 역순)

 - column : 세로 정렬 (colum-reverse : 역순)

 

2. justify-content :  text-align과 같은 개념으로 div 안의 텍스트 정렬 정의하는 기능

3. [ flex-wrap : wrap; ]
div 바깥의 영역이 정해져있다면, 그 크기를 넘어갈 경우 컨텐츠들이 자동으로 다음 줄로 넘어갑니다.

4. [ flex : 1; ] vs [ width: 350px; ]

flex:1를 위의 박스 안에서 두번째 div안에 넣을 경우, div가 여러개라면 동일한 크기로 정렬됩니다. 예를 들어 flex:2와 flex:1로 구성한다면 하나의 div는 다른 div보다 2배 크기로 정렬된다는 의미입니다. width의 경우는 div의 가로폭을 고정으로 정의하고 있습니다. 이 경우에는 전체 화면 폭의 크기를 알고 이를 염두에 두고 크기를 정하는 것이 좋습니다.

 

5. 기타

 - [ margin : auto; ] : div 자체를 가운데 정렬할 수 있게 해줍니다.

 - [ padding:20px 40px 20px 40px; ] : div 안의 여백  크기를 정의할 수 있습니다.

 - <p></p> : 텍스트(글자)를 p태그 안으로 감싸서 쓰면 paragraph와 같은 효과를 줍니다.
 - <br> : 줄 바꿈 

 

 

다음 글은 본격적으로 shop구성에 대해 쓸 예정입니다.

 

2021.03.12 - [한글 & 컨텐츠] - 쇼피파이 홈페이지 제작기02 : 템플릿 선택과 메뉴 구성

쇼피파이 홈페이지 제작기02 : 템플릿 선택과 메뉴 구성

2021.02.27 - [한글 & 컨텐츠] - 쇼피파이 홈페이지 제작기 01 : 구조 파악

쇼피파이 홈페이지 제작기 01 : 구조 파악