Post

더 나은 웹 개발을 위한 가이드를 읽고

Posted Updated
Preview Image
By Kidongg 24 min read

책을 읽게된 배경

현재 코드가 최선의 코드인 것인지에 대한 고민을 자주합니다. 그런 고민을 하던 중 글또에서 책을 추첨하는 이벤트를 진행한다는 소식을 접했습니다. 관심이 가는 책이 많았지만 특히나 [더 나은 웹 개발을 위한 가이드]에 눈이 갔습니다.

운이 좋게 이벤트에 당첨이 되었고 웹 개발에 대한 인사이트를 얻을 수 있는 기회를 얻었습니다. 모쪼록 책에서 배운 내용을 바탕으로 현재 코드를 개선해보고 싶단 생각이 들었습니다.

img-description

웹 개발을 위한 라이프 사이클

웹 개발에 필요한 단계별 업무를 파악하고, 그 과정에서 적용할 수 있는 기법을 예시를 통해 설명합니다. 웹 애플리케이션을 설계하는데 인사이트를 얻을 수 있었습니다.

1) 웹 개발 라이프 사이클

  1. 정보 수집 : 웹 애플리케이션을 어떤 유형의 사람에게 제공할 것인지 파악하고 연력, 성별, 선호도를 고려하여 요구사항을 도출하는 과정
  2. 기획 : 콘텐츠, 디자인, 개발 기술, 마케팅 등 웹 애플리케이션 개발을 위한 모든 측면을 고려하여 전략화하는 과정
  3. 디자인 : 웹 애플리케이션의 전반적인 구조를 파악하기 위한 와이어 프레임과 화면을 구성하는 정보 필드를 정의하고 콘텐츠(메튜, 버튼, 링크)에 대한 사용법을 정의하는 스토리보드를 만드는 과정
  4. 콘텐츠 생성 : 웹 애플리케이션에서 사용되는 텍스트, 이미지, 동영상, 오디오, 인터랙티브 요소, 애니메이션 등을 정의하는 과정
  5. 개발 : 웹 애플리케이션을 개발하는 과정
  6. 테스트 및 품질 보증 : 단위 테스트, 스트레스 테스트, 부하 테스트 등을 반복하면 웹 화면의 모든 기능, 사용성, 다양한 기기 및 브라우저와의 호환성, 성능을 확인하는 과정
  7. 배포 및 운영 : 웹 애플리케이션을 운영 서버로 배포하고 운영하는 과정

2) 개발 전에 이루어지는 것

  1. 아이템 선정 : 어떤 제품을 만들어서 어떤 서비스를 제공할 것인지 결정하는 과정
  2. 시장 조사 : 선정된 아이템이 시장에서 필요한지, 수요가 있는지 점검하는 과정
  3. 벤치마킹 : 서비스와 유사한 경쟁 제품이 있는지 조사하는 과정(비교 분석을 통해 장점은 흡수하고 단점을 보완)
  4. 아이템 구체화
  5. 사용자 분석 : 사용자 분석, 사용자 모델링, 사용자 플로우 차트 설계하는 과정

img-description

img-description

img-description

6.정보 구조 설계 : 웹사이트에서 제공하는 콘텐츠를 체계화하고 이용자가 빠르고 정확하게 원하는 콘텐츠에 접근할 수 있는 구조를 만드는 과정

img-description

7.사이트맵 : 웹사이트의 콘텐츠를 분류하고 사이트에서 제공하는 모든 메뉴를 구조화하는 과정

img-description

img-description

8.와이어 프레임(feat. 피그마) : 화면 단위로 레이아웃을 설계하고 서비스 흐름을 정의하는 과정

9.스토리보드(feat. 피그마)

  • 레이아웃에 실질적인 콘텐츠(메뉴, 링크, 버튼, 내용)을 배치하고 콘텐츠 사용법을 기록하는 과정
  • 추가적으로 정책, 프로세스, 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 정보를 기록하는 과정

10.프로토타입(feat. 피그마) : 실제 구현할 서비스와 흡사한 모형을 만드는 과정

3) 개발 후에 이루어지는 것

  1. 테스트 케이스 작성 : 애플리케이션이 사용자의 요구사항을 정확하게 준수했는지 확인하기 위한 명세서를 작성하는 과정(실행 조건, 입력 값, 테스트 절차, 기대 값)
  2. 단위 테스트 : 가능한 가장 작은 단위 기능을 실행해서 예상대로 동작하는지 테스트하는 것(ex. 함수, 화면)
  3. 테스트 시나리오 작성 : 애플리케이션 사용자의 역할을 기반으로 비즈니스 프로세스가 정상적으로 수행되는지 종합적으로 테스트하기 위한 문서를 작성하는 과정
  4. 통합 테스트 : 테스트 시나리오를 바탕으로 애플리케이션이 정상적으로 동작하는지 확인하는 과정
  5. 빌드와 배포 : 개발한 프로그램 배포를 위한 파일을 생성하고 운영 서버에 반영하는 과정

더 나은 CSS 개발

웹 개발에 필요한 CSS 시스템이 무엇이 있는지 일목요연하게 설명해줍니다. 시스템의 전반적인 스타일 시스템을 구축할때의 인사이트를 얻을 수 있었습니다.

1) CSS 박스 모델

  • 모든 HTML 요소는 박스 모양으로 구성되면 이것을 CSS 박스 모델이라 부릅니다. 다음의 박스가 존재합니다.
    • content : 텍스트, 이미지, input, div 요소 등 모든 콘텐츠
    • padding : content를 둘러싼 공간(border와 content 사이의 공간)
    • border : content와 padding을 둘러싼 선
    • margin : border를 둘러싼 공간

    img-description

2) CSS 요소 크기

  • HTML 요소에 대한 너비와 높이는 각각 width, height 프로퍼티를 사용합니다.

    • auto(기본값) : 브라우저가 자동으로 계산합니다.
    • px : 직접 길이를 지정합니다.
    • % : HTML 요소를 둘러싼 블록의 길이를 기준으로 %를 지정합니다.

  • HTML 요소의 너무와 높이를 계산하는 방법은 box-sizing 프로퍼티를 사용합니다.

    • initial(기본값) : 기본값을 설정합니다.
    • content-box : 콘텐츠 영역을 기준으로 크기를 정합니다.
    • border-box : 테두리(border)를 기준으로 크기를 정합니다.

    img-description

3) flexbox 레이아웃

  • flexbox를 구성하는 2개의 축

    • flexbox에서 주축은 flex-direction 속성을 사용해서 정의할 수 있고, 다음과 같은 4개의 값을 가질 수 있습니다. 이 값에 따라서 컨테이너에 담긴 아이템이 배치되는 방향과 순서가 달라집니다.

      • row(기본값) : 아이템이 배치되는 방향이 왼쪽에서 오른쪽으로
      • row-reverse : 아이템이 배치되는 방향이 오른쪽에서 왼쪽으로
      • column : 아이템이 배치되는 방향이 상단에서 하단으로
      • column-reverse : 아이템이 배치되는 방향이 하단에서 상단으로

  • 복수행을 갖는 컨테이너 설정

    • 컨테이너에 담긴 아이템이 한 개의 행 혹은 한 개의 열에 함께 담을 수 없는 경우 여러 행에 나열할 수 있습니다. 아이템을 여러 행에 나열하려면 flex-wrap 속성 값을 wrap으로 지정합니다.

    img-description

  • 컨테이너 아이템 정렬

    • 주축 방향 정렬 : 주축 방향으로 정렬해야 할 때는 justify-content 속성을 사용합니다.

      • flex-start(기본값) : 아이템들을 시작점으로 정렬합니다.
      • flex-end : 아이템들을 끝점으로 정렬합니다.
      • center : 아이템들을 가운데로 정렬합니다.
      • space-between : 아이템과 아이템 사이의 간격을 균일하게 정렬합니다.
      • space-around : 아이템의 둘레 간격을 균일하게 정렬합니다.
      • space-evenly : 아이템사이와 시작점과 끝점의 간격을 균일하게 정렬합니다.

      img-description

    • 교차축 방향 정렬 : 교차축 방향으로 정렬할 때는 align-items 속성을 사용합니다.

      • stretch(기본값) : 아이템의 크기를 교차축 방향으로 끝까지 늘립니다.
      • flex-start : 아이템들을 교차축의 시작점으로 정렬합니다.
      • flex-end : 아이템들을 교차축의 끝점으로 정렬합니다.
      • center : 아이템들을 교차축의 가운데로 정렬합니다.
      • baseline : 아이템들을 텍스트 베이스라인 기준으로 정렬합니다.

      img-description

    • 여러 행 정렬 : 아이템 크기의 합이 컨테이너 크기를 벗어나는 경우 아이템을 여러 행으로 나열하기 위해 flex-wrap: wrap;을 지정했습니다. 이렇게 아이템이 여러 행으로 나열되는 경우 align-content 속성으로 정렬합니다. align-content는 아이템의 행이 2줄 이상일 때 교차축 방향으로 정렬을 결정하는 속성입니다.

      • stretch(기본값) : 아이템 크기를 교차축 방향으로 늘릴 때 행별로 동일한 크기로 늘립니다.
      • flex-start : 아이템들을 교차축의 시작점으로 정렬합니다.
      • flex-end : 아이템들을 교차축의 끝점으로 정렬합니다.
      • center : 아이템들을 교차축의 가운데로 정렬합니다.
      • space-between : 행과 행 사이의 간격을 균일하게 정렬합니다.
      • space-around : 행의 둘레의 간격을 균일하게 정렬합니다.
      • space-evenly : 행의 사이와 시작점과 끝점 사이를 모두 균일하게 정렬합니다.

      img-description

      img-description

  • flexbox 아이템 크기 설정 : 컨테이너 안에 배치되는 아이템 크기를 설정할 수도 있습니다.

    • flex-basis : 아이템 기본 크기를 설정합니다. flex-direction이 row일 때는 너비를, column일 때는 높이를 설정합니다. flex-basis를 100px로 지정하면 아이템의 크기가 100px보다 작으면 크기를 100px로 늘려주고, 아이템의 크기가 100px보다 크면 100px로 바꾸지 않고 원래 크기 그대로 유지합니다.
    • flex-grow : flex-grow값을 1과 같은 양수로 지정하면 flex-basis 크기를 기준으로 컨테이너 주축 방향으로 아이템의 크기를 지정된 비율만큼 늘려줍니다. 아이템들 크기의 합이 주축의 크기보다 작다면 주축의 남는 공간을 각 아이템에 배분하도록 정의합니다.
    • flex-shrink : flex-grow와 반대 개념입니다. flex-grow가 컨테이너의 주축에서 남는 공간을 아이템들에 분배하는 방법이라면, flex-shrink느 컨테이너 주축의 공간이 부족할 때 각 아이템의 크기를 줄이는 방법입니다. flex-shrink 값이 1과 같은 양수이면 해당 비율로 부족한 공간에 대해 아이템의 크기를 줄입니다.

사용자 기기에 따른 고려사항

사용자 기기에 따라 개발자가 고려해야하는 점을 설명해줍니다. 반응형 웹을 개발을 하는데 고려해야하는 점을 중심으로 인사이트를 얻을 수 있었습니다.

1) 데스크탑에서의 웹

  • 웹을 사용하는 방식 : 키보드, 마우스
  • 사용자 고려하기
    1. 콘텐츠를 선택하기까지의 이동 시간 단축
    2. 키보드로 요소 이동 지원 : tabindex

2) 모바일에서의 웹

  • 웹을 사용하는 방식 : 손가락

  • 사용자 고려하기

    1. 중요하지 않은 콘텐츠 생략
    2. 직관적인 네비게이션 제공

    img-description

    3.가독성 높은 폰트 사용

    img-description

    4.텍스트에 배경과 대비되는 색상 사용

    img-description

    5.터치를 위한 충분한 공간 확보

    img-description

    6.사용자가 직접 입력하는 정보 최소화

    img-description

    7.입력 용도에 맞는 입력 필드 사용

    8.엄지 영역 고려

    9.스와이프 제스처 고려

    10.마우스 오버를 통한 콘텐츠 대체

실질적 변화

1) QA를 프로젝트 일정에 추가

프로젝트 일정에서 QA 일정을 추가했습니다. QA 시트를 작성을 통해 체계적으로 QA를 진행할 예정입니다.

img-description

2) CSS 시스템 수립

프로젝트 전반에 사용할 CSS 시스템을 설계하고 적용했습니다.

  • 글로벌 시스템 : 시스템 전반에 적용할 스타일 코드를 한곳에서 관리
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

// src/styles/_global.scss

/* http://meyerweb.com/eric/tools/css/reset/
   v5.0.2 | 20191019
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
  display: none;
}
body {
  line-height: 1;
  background-color: #000000;
  color: #ffffff;
}
menu,
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
  • 반응형 시스템 : 미디어 쿼리, 브레이크 포인트를 통해 반응형 시스템을 구축
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// src/styles/_mixins.scss
@mixin desktop {
  @media (min-width: 1127px) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: 768px) and (max-width: 1126px) {
    @content;
  }
}

@mixin mobile {
  @media (min-width: 360px) and (max-width: 767px) {
    @content;
  }
}
  • 사용자 지정 CSS 속성시스템 : 스타일과 관련된 반복된 코드를 하나의 변수로 관리
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// src/styles/_variables.scss

// Gray Color Palette
$gray-5: #f3f3f9;
$gray-10: #e8e8f5;
$gray-20: #bcbccf;
$gray-30: #9494a2;
$gray-40: #6b6b79;
$gray-50: #555560;
$gray-60: #42424b;
$gray-70: #313137;
$gray-80: #27272b;
$gray-90: #1c1c1f;
$gray-95: #18181b;

// Green Color Palette
$green-5: #f4fef4;
$green-6: #f4fef4;
$green-10: #e3fce3;
$green-20: #a8fda7;
$green-30: #72ff70;
$green-40: #54f451;
$green-50: #21eb1e;
$green-60: #1eca1c;
$green-70: #19aa17;
$green-80: #0e8c0c;
$green-90: #0e6d0c;
$green-95: #073f06;

3) AI의 도움을 받기

인공지능 시대의 변화의 물결 속에서 더 좋은 서비스를 제공하는 프론트엔드 개발자로 성장하기 위해 AI 서비스를 적극적으로 활용하고 있습니다.

  • Cursor AI : IDE 내에서 소스코드 및 인터넷 정보에 대한 피드백 받기

img-description

  • Code Rabbit : Pull Request에 대한 피드백 받기

img-description

  • Figma Dev Mode : IDE 내에서 디자인 정보를 확인하고 가져오기

img-description

주니어 웹 개발자에게 추천합니다.

사수가 없어 고민인 웹 개발자에게 추천하고 싶은 책입니다. 개인적으로 업무 프로세스를 개선하고 코드를 효율적으로 관리하는데 도움이 되었습니다. 내가 잘하고 있는 것, 부족한 것을 파악하고 웹 개발 업무의 방향성에 대해 고민할 수 있었습니다.

블로그 내용을 제외하고 실무에서 도움 될만한 다양한 정보가 담겨 있습니다. 구체적인 예시를 코드와 이미지를 통해 파악할 수 있어 책을 이해하는데도 무리가 없을 것이라 생각됩니다. 중간중간에 아래와 같은 프로그래밍 격언이 등장하는데, 독서를 하는데 깨알 재미를 더해줍니다.

단순함은 성공적인 프로그래밍의 핵심이다. 복잡함은 막연한 어려움을 겪게 만든다.

프로그램이 처음부터 완벽할 필요는 없다. 중요한 것은 그 프로그램이 완벽해질 수 있느냐이다.

모쪼록 재밌고 실용적인 독서시간 이었습니다. 책을 후원해주신 글또와 한빛미디어에게 감사의 말씀을 드립니다.

Experience, Book
더나은웹개발을위한가이드 책 후기 리뷰 기록 공유
This post is licensed under CC BY 4.0 by the author.