이제야 조금은 앱 같다

 

밋밋한 테마에다가 텍스트만 줄줄이 나열되어서 화면만 보고서는 무슨 기능인지 직관적으로 알기 어려웠던 프로젝트 결과 화면에 간단한 CSS를 입혀 정보 전달력을 높이는 작업을 진행했다.

 

 

메인 화면에서 '운동 찾기' 메뉴로 들어갈 수 있다.

 

 

 

운동 찾기 메뉴에 들어오면 등록되어 있는 운동 모집 글 리스트를 확인할 수 있다.

 

 

 

현재 접속자는 사용자 3이다. 참가가 확정된 운동 모집 글에서는 참가자 정보에서 자신의 정보를 확인할 수 있다.

 

 

 

게시글 작성자의 계정으로 접속해 자신의 게시글을 확인하면 게시글에 신청한 사람의 정보를 확인할 수 있고, 신청을 수락하거나 거절할 수 있다.

 

 

 

그렇게 복잡한 CSS 작업은 아니었지만, 작업 과정에서 배치에 어려움을 겪었던 부분들이 있었다.

 

 

화면의 대부분을 차지하는 회색 화면이 사진처럼 화면의 위부터 아래 전체까지를 차지하고, 화면을 넘어갈 정도의 컨텐츠가 있을 경우 스크롤해 내용을 확인할 수 있게 하려 했다.

 

헤더의 경우 다음과 같이 속성이 주어지고 있다. 하단 네비게이터는 top 속성이 bottom으로 바뀐 것 외에는 동일하다.

 

// Header.jsx

const Container = styled.header`
  position: fixed;
  top: 0;
  height: 60px;
  width: 100%;

  // display, border, background, ...
`

 

화면 전체 영역(주황색과 회색을 합친 영역)을 차지하는 Container 컴포넌트의 높이를 헤더와 하단 네비게이터가 차지하는 영역을 제외한 모든 영역을 차지하게 하려고 다음과 같이 속성을 지정했지만 의도한 대로 결과가 나오지 않았다.

 

// App.jsx

const Container = styled.div`
  height: calc(100% - 120px);

  // padding, background color
`

하단 네비게이터 위에 흰색의 빈 공간이 나타났다.

 

의도는 '화면 전체 높이(100%)에서 헤더와 하단 네비게이터의 높이(120px)를 뺀 만큼을 계산해서 Container의 높이로 설정' 하는 것이었지만 적용이 되지 않았다. 개발자 도구에서 % 값을 바꿔보거나 아예 속성을 껐을 때도 전혀 바뀌는 내용이 없어서 이 방식으로 높이를 설정하면 안되겠구나 싶었다.

 

현업에서 개발을 하고 오신 3기 후배님의 도움을 받아 문제를 해결할 수 있었다. 일단 Container를 다음과 같이 수정했다.

 

const Container = styled.div`
  height: 100vh;
`

 

height가 헤더와 하단 네비게이터를 신경쓰지 않고 높이 값을 100 viewport height로 설정해도 문제가 없었던 이유는 헤더와 하단 네비게이터는 fixed 위치로 이미 고정되어 있었기 때문이었다. Container의 위아래로 헤더와 네비게이터만큼의 padding을 줘서 컨텐츠 영역을 확보하기만 하면, box-sizing이 border-box이기 때문에 화면이 위아래로 초과되어 스크롤이 생기지 않으면서 화면 전체를 꽉 채울 수 있었다.

 

문제는 해결했지만, 도대체 Percentage로 속성에 값을 줬을 때는 왜 말을 안 들었던 것인지 이해가 되지 않았다.

 

 

MDN CSS Height와 몇몇 블로그 글을 찾아본 결과, Percentage 값은 부모 요소와의 상대적인 크기를 지정하는 것이라는 설명을 확인할 수 있었다. Container의 Percentage 값을 아무리 변경하고 속성을 꺼 보아도 변화가 없었던 이유는 부모 요소에 지정된 height 값이 없었기 때문이었다.

 

Container의 상위 div 요소에 height 값을 지정하고 Container의 height 값을 조정해보자 그제서야 Percentage 속성 값이 적용되는 것을 확인할 수 있었다.

 

 

 

 

화면을 통해 전달받으려는 정보를 직관적으로 확인할 수 있게 되면서 디테일을 챙겨야 할 부분들이 구체적으로 보이기 시작했고, 앱의 편의성에 대한 고민이 조금씩 생기기 시작했다.

 

아샬님이 말씀하셨던 '앱을 사용하면서 얻을 수 있는 가치'라는 게 무슨 느낌인지, 노아 트레이너님이 말씀하셨던 '사용자가 실제로 사용할 수 있어야 하는 앱이어야 한다'는 말이 좀 더 와닿기 시작했고, 미완성된 기능이 그대로 노출된다는 것이 결코 가벼운 문제는 아니구나 싶은 생각이 들게 되었다.

 

 

 

 

References

- https://developer.mozilla.org/ko/docs/Web/CSS/percentage

- https://velog.io/@hyemison/height-width