Semantics

"semantic"이라는 단어의 의미를 찾아보면 다음과 같은 정의가 있다.

의미론은 언어적 의미를 연구하는 학문입니다. 의미가 무엇인지, 단어가 어떻게 의미를 얻는지, 복잡한 표현의 의미가 부분에 따라 어떻게 달라지는지 살펴봅니다. (위키백과)

"의미론적인"이라는 뜻을 가지며, 프로그래밍에서 semantic이란 "코드 조각들의 의미"를 나타낸다.
프로그래밍에서 가지는 "의미"의 의미는 정확히 어떤 것일까?

코드의 의미

다음과 같이 동일한 동작을 하는 두 개의 코드가 있다고 해보자.

let a = 1 + 2;
console.log(a);

let sum = add(1, 2);
console.log(sum);

이 두 개의 코드는 모두 같은 결과를 출력하지만, 의미적으로는 완전히 다르다.
첫 번째 코드는 단순히 숫자를 더하는 연산을 수행하지만, 두 번째 코드는 add라는 함수의 의미를 포함하고 있다.

여기서 의미론적으로 중요한 차이가 발생한다.

1. 첫 번째 코드에서는 1 + 2가 계산되긴 하지만, 이 연산이 어떤 의미를 가지는지 명확하지 않다.
2. 두 번째 코드에서는 add라는 함수가 사용되면서 “이 연산이 덧셈(addition)이라는 의미를 가진다”는 것이 코드에 드러난다.

즉, 코드의 의미는 그 코드가 수행하는 작업이 무엇인지, 그리고 그것이 어떻게 해석되는지에 대한 것이다.
단순히 올바른 구문(문법) 작성보다 한 단계 나아가서, 사람과 컴퓨터 간에 원활한 협업을 위해 작성하는 차원이라고 볼 수 있다.

---

의미 있는 코드 작성을 위한 고민

개발 공부를 하다 보면 위와 같은 meme을 심심치 않게 볼 수 있다. 물론 단순히 웃고 넘어갈 일이 아니라, 실제로 코딩을 할 때마다 겪는 현실적인 문제이기도 하다.

그렇다면 왜 사람들은 변수나 함수의 이름을 짓는 데에 오랜 시간이 걸리는 걸까?

1. 코드의 의미는 이름에서 시작된다

만약 내가 짠 코드가 아닌 다른 사람이 짠 코드를 받아서 작업을 이어나간다고 해보자.
별다른 컨벤션 없이, 그냥 막 지은 이름들로 작성한 코드를 보면 컴퓨터를 던지고 싶을 것이다.
만약 타인과 협업하는 상황이 아니더라도, 내가 지금 짠 코드를 미래에 내가 알아보지 못하는 상황도 발생하기 매우 쉽다.

프로그래밍에서 코드의 의미를 이해하는 가장 첫 번째 단서는 변수명과 함수명이다.
마크업과 스타일링에서는 사용한 태그의 종류와 클래스 또는 아이디 이름일 것이다.

HTML의 Semantic

아래 두 코드를 비교해보자. 한 코드는 div 태그로만 구조화되어 있고, 한 코드는 시맨틱 코드를 사용하여 구조화했다.

// div 태그로만 구조화
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">...</div>
<div class="footer">...</div>

// semantic tag를 사용하여 구조화
<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

두 HTML 코드 모두 화면 상에서는 동일하게 구현된다. 구현됨(syntax)에 있어서 차이는 없지만, 코드가 가지는 의미론적인 관점에서는 두 번째에 작성된 코드가 더 좋은 코드다.

이렇게 하면 HTML 태그만 보더라도

• <header> → 문서의 머리말 부분
• <nav> → 내비게이션
• <main> → 주요 콘텐츠
• <footer> → 문서의 바닥글

이라는 의미를 자연스럽게 알 수가 있다.

CSS에서의 Semantic

만약 클래스나 아이디를 무작위로 작성하거나, 시맨틱 태그를 지키지 않은 채 div나 span을 이후에 유지보수하는 사람이 코드를 해석하는 데 많은 시간을 허비할 것이다.

❌ 의미가 불명확한 네이밍

<div class="box1">...</div>
<div class="box2">...</div>
<div class="big-red">...</div>

.box1 {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.box2 {
  width: 150px;
  height: 150px;
  background-color: green;
}

.big-red {
  font-size: 24px;
  color: red;
}

이 코드에서 .box1, .box2 같은 클래스명은 이 요소가 어떤 역할을 하는지 전혀 설명하지 않는다.
또한 .big-red라는 클래스명은 스타일을 직접적으로 나타내고 있어,
만약 글자 색이 빨간색에서 검은색으로 바뀐다면 이름과 실제 스타일이 불일치하게 된다.

✅ 의미가 명확한 네이밍

<div class="profile-card">...</div>
<div class="notification-box">...</div>
<div class="error-message">...</div>

.profile-card {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.notification-box {
  width: 150px;
  height: 150px;
  background-color: green;
}

.error-message {
  font-size: 24px;
  color: red;
}

이제 클래스 이름만 봐도 각각의 클래스가 어떤 역할을 하는지 비교적 쉽게 이해할 수 있다.
이렇게 의미를 반영한 네이밍을 하면, 추후 유지보수할 때 이름만 보고도 해당 요소의 역할을 파악할 수 있기 때문에 코드의 가독성이 향상된다.

JS에서의 Semantic

아래 두 코드 중 어떤 것이 더 이해하기 쉬울까?

let x = 5;
let y = x * x * 3.14;

let radius = 5;
let circleArea = radius * radius * Math.PI;

두 코드 모두 같은 연산을 수행하지만, 이름을 어떻게 짓느냐에 따라 코드의 의미가 달라진다.
첫 번째 코드는 x와 y가 무엇을 의미하는지 명확하지 않지만,
두 번째 코드는 원의 반지름(radius)과 넓이(circleArea)를 구하는 코드라는 것이 직관적으로 이해된다.

모든 언어가 가지는 문법은 다르지만, semantic의 의미와 목적은 직관적이고 알아보기 쉬운 이름과 구조를 통해 코드를 더욱 명확하게 만들고, 이를 통해 협업하는 사람들 또는 미래의 자신이 쉽게 이해할 수 있도록 돕는 데 있다.

2. Syntax Error와 Semantic Error

코딩을 하다보면 잘못된 문법에 의해 Syntax Error가 발생한 경험이 있을 것이다. Syntax Error(문법 오류)가 발생하면, 주로 컴파일 언어는 실행 자체가 안 되는 경우가 많고, 인터프리터 언어는 런타임에서 원하는 대로 동작하지 않는 경우가 많을 것이다.

Syntax Error는 그 자체로 '버그'로 취급되기 때문에, 절대 없어야 하는 오류이자 제거 1순위 오류이다.

Syntax Error는 명백히 잘못된 코드로 인해 발생하는 오류이므로, 프로그램 실행을 방해하며 이를 해결해야만 정상적인 동작을 할 수 있다. 그렇다면 Semantic Error는 무엇일까?

Semantic Error

Semantic Error는 문법상으로는 문제가 없는 코드에서 발생하는 오류로, 의도한 대로 동작하지 않는 경우를 말한다. 즉, 코드가 컴파일되거나 실행되지만, 그 결과가 우리가 기대하는 동작과 맞지 않을 때 생긴다. 이는 코드의 의미가 잘못 해석되었거나 잘못 작성되었기 때문이다.

예시: 잘못된 의미의 코드