Blank_D

[회고] 2023년을 뒤돌아 보며 - 성장편

Blank_D — Mon, 1 Jan 2024 14:47:21 +0900

들어가며

회고 글을 2024년이 되어서 쓰는 것도 조금 웃기긴 합니다만.. 늦었다고 생각할 때가 가장 빠른 것이라는 명언에 힘입어(?) 제가 다짐한 것들을 실행해 보고자 이렇게 글을 써봅니다.

2023년을 뒤돌아 보면, 정말 다사다난했고 개인적으로 많은 것을 경험했고 깨달은 것들이 많은 한 해였습니다. 현재 진행하는 업무에 대해 현타를 느끼며 여러 가지 성장통도 겪고, 많은 사람들은 대하고 헤어지고 내 한계를 느껴서 미끄러지는 것을 반복하고 매년마다 그렇지만 유독 2023년은 그런 한 해로 지나간 것 같아요. 그런 2023년에 내 마음에 남는 가장 3가지 키워드로 회고를 풀어내보고자 합니다. 원래는 한번에 모든 키워드를 풀어내보고자 했습니다만,, 너무 길어질 것 같아서 몇 가지로 나눠서 이야기를 풀어보겠습니다.

아래부터 쓰는 글들은 말하듯이 풀어 나가기 위해 "구어체" 로 적도록 하겠습니다.

성장, 내 안의 한계를 직면하다.

나의 2023

현재 회사는 다닌지 약 3년이 다 되어가는 회사로 IT 에이전시로 대학교와 연계하여 여러 프로젝트(미디어, 디자인, 홈페이지, 포탈 등)를 진행하고 있는데, 나는 현재 대학교 포탈 시스템을 구축하는 웹팀에 속해 있고, 서비스 기획자 로 일하고 있다.

2023년은 대학교 직원들이 사용하는 포탈 사이트 리뉴얼 프로젝트 2년차가 되는 시점이었으며, 가장 많은 부분을 바꿔내야 하는 프로젝트 차수였다. 간단히 2022년에 진행한 1차년도 프로젝트를 얘기해 보면 각 파트(프론트, 백엔드, UI/UX&기획) 별로 협업하는 방식을 맞췄고 (여러 시행착오를 겪고 힘들었지만 어느 정도 안정기를 찾아가는 중이다) 포탈 리뉴얼 목표(사용성 개선, 업무 효율화, 메뉴 통합 등)를 도출하기 위해 사용자 인터뷰와 기존 포탈을 분석하며 리뉴얼 프로젝트를 진행하는 방법에 대해 내부적으로 재정비하는 시간을 가지기도 했다. 어찌 보면, 리뉴얼이 많이 이루어진 차수가 아니라 (그렇다고 리뉴얼을 하지 않은 것은 아니다!) 기반을 튼튼히 만들기 위한 프로젝트 차수라고 생각이 든다. 그렇게 기반이 어느 정도 다져진 상태에서 2년 차에 들어왔고 위에서 언급한 것처럼 본격적으로 가장 많은 리뉴얼이 필요한 상황이었다.

1차년도에 적립한 업무 프로세스대로 리뉴얼을 위해 기존 시스템을 분석(기능동작, 용도, 각 메뉴별 연동 등)하고 해당 시스템을 사용하는 사용자가 가지는 불편함과 개선이 필요한 사항을 듣고 정리했다. 1차년도에는 일반행정 업무(인사, 부서관리 등)를 사용하는 화면 위주로 개선을 했었고, 2차년도는 가장 실질적으로 많이 사용되는 대학교 학부 시스템을 개선하는 작업을 진행했다.

성장

2023년에는 정말 많은 일들이 있었고, 많은 부분에서 성장을 이루었지만 가장 크게 성장 곡선을 이룬 케이스 하나를 이야기해보고자 한다.

이 프로젝트를 진행했기에, 이후에 내가 어떤 형태로 업무를 진행해야 하는지 형태가 잡혔다고 말해도 과언이 아니라 생각한다.

쉽지 않았던 시작

2023년도 초반 나는 1차년도 일반행정 업무 중에서 복잡한 프로세스를 지니는 메뉴를 진행하시던 분이 중도하차하는 바람에 대신해서 그 메뉴를 맡아서 진행하게 되었다. 직원 및 교원을 채용하는 업무를 진행하는 메뉴였는데, 해당 업무는 특정한 절차가 있고 해당 절차에 따른 대학교 내 규정들이 있었기에 해당 부분을 시스템 상에 적용해야 했다. 그런데 웬걸.. 앞 전 작업자가 제대로 해놓은 것이 없이 정말 말 그대로 똥을 싸놓고 나 몰라라 했다.. 결국 작성된 기획서와 화면분석서는 모두 리셋하고 새롭게 시작을 해야 했다. 해당 업무를 진행하는 분은 대학교 내 전산시스템을 관리하는 부서의 부원장님(우리에게 정말 많은 도움을 주시는 분)으로 직접적인 소통을 그분과 함께하게 되었다. 굉장히 떨리는 일이었다 왜냐하면 그분은 이 전에 일하셨던 경력이 굉장히 탄탄하고 큰 규모의 프로젝트를 진행하시는 분이셨고 난 이제 막 발걸음을 띄고 걸어가는 주니어였으니까. 그래도 최대한 기존 화면을 분석하고 분석하면서 생기는 질문들을 잘 정리하여 안건으로 보여드리고 회의를 진행했다. 결과적으로는 회의는 성공적으로 끝났다. 최대한 프로세스를 분석하며 필요해 부분들은 어필하여 개선하고자 하였고 업무에 대해 모르는 부분은 질의응답을 통해 도메인 지식을 습득하였고 화면 기획과 설계를 진행했다.

그렇게 모든 일이 순탄하게 흘러간다고 생각할 때쯤, 프로젝트 진행이 너무 더디기 때문에 기존 사용성을 그대로 가지고 가자는 클라이언트(대학교 내 전산원)의 요청이 왔고, 나의 입장에서는 기존 사용성이 너무 안 좋고 현재는 사용하지 않는 기능도 덕지덕지 붙어있는 (마치 덩치만 커 보이게 만든 실속 없는 공갈빵처럼) 상태를 그대로 만들어서 UI 만 변경해서 내놓는 것은 만들어 놓고도 욕을 먹을 것이 뻔하기 때문에.. 그 요청을 묵살하지 않고 최대한 회유할 수 있는 방안을 생각해야 했다. 개인적으로는 사용자의 편의성을 개선하지 않고 리뉴얼을 하는 것은 결국 겉모습만 이쁘게 바꾼 쓰레기에 지나지 않는다라고 생각하기 때문에 지속적으로 미팅을 진행하며, 시간이 조금 걸리더라도 개선이 필요한 부분은 반드시 개선해나가야 한다고 주장했고 결국 그렇게 진행하기로 결정되었다.

해당 업무 화면을 개선하면서 가장 많이 공을 들였던 것은 바로 "진행상태"에 대한 정의다. 왜냐하면 채용을 진행하는 상태에 따라 사용자가 할 수 있는 것들이 명확히 정해져 있었고, 해당 규칙들이 기존 시스템 상에는 존재하였으나 적용되지 않는 상태였기 때문이었다. 개선을 통해 이러한 부분을 확실히 짚고 넘어가야 했기 때문에 해당 부분에 대한 정의를 정말 열심히 했다. 대외비 이기 때문에 기획서를 캡처해서 올리지는 못하지만, 각 상태별 정의, 기능연동, 안내메시지 등을 고려하는 것이 생각보다 쉽지 않았다. 한 가지 예시를 들어보자면 아래와 같다.

[심사] 단계
---
정의
- 지원자 원서 접수 > 담당자가 원서 확인 > 접수 처리 > 심사 진행
기능 연동
- 시스템 상에서 정의된 [처리 기간(DB keyname)] 내에서만 처리가능 하도록 함.
- 각 채용 구분별로 심사 진행 단계를 구분 등

간단히 설명했지만 위와 같은 단계를 대충 [접수 > 심사 (각 단계별) > 최종 > 이관] 이와 같이 구분하고 각 단계별로 연관 관계를 표기하여 시스템 상에 적용할 수 있도록 백엔드 및 프론트엔드 개발자에게 리뷰하고, 시스템 적으로 구현하는 것에 큰 문제는 없는지 DB 내 컬럼이 해당 용도로 사용하는 것이 문제가 없는지, UI 상에서 표기가 가능한지 등을 따져본다. 이렇게 해서 각 상태별로 정의를 내리고 개발을 진행했고 해당 프로젝트는 성공적으로 마무리되는 줄 알았다... (진짜)

세상은 내 뜻과는 다를 때가 많다

저렇게 단락을 끊었으니 대부분은 눈치를 챘겠지만 성공적으로 마무리될 줄 알았던 프로젝트에서 내가 예상하지 못했던 변수가 발생했다. 바로 [대학교 업무 시스템]이라는 도메인이 가지는 특징이다. 일반적으로 서비스되는 B2C 라면, 세워진 정책에 따라 시스템이 동작하고 시스템에서 지정한 규칙을 따라야 하는 것이 당연하지만 [대학교 업무 시스템]의 가장 큰 특징이라면 해당 업무를 지정된 시스템에 따라 처리하는 것이 반드시 강제되지 않는다는 점에 있다. 즉 시스템 적으로 규칙을 정확하게 만들어두고 빡빡하게 해 두어도 업무 특성에 따라 해당 규칙을 따르지 않는 경우가 흔히 있다는 점이다. (굉장히 화가 나는 포인트이지만 따라야 하는 현실..)

그렇게 해서 결론적으로는.. 논의를 통해 시스템 상에서 막았던 모든 규칙들을 풀어야 하는 지경에 이르렀다. 진짜 이때 피가 거꾸로 솟는 것 같았다. 정말 열심히 회의하고, 의논하고, 각 상태별로 정의를 내리고 규칙을 정했던 모든 것들이 무너져 내리는 순간이었다. 백엔드에서 막았던 시스템적 연계를 풀어야 했고, 그에 따른 프론트앤드 화면 처리가 변경되어야 했다. 개발 기간이 계속 길어지고 해당 업무를 맡아서 진행했던 나는 계속 심적으로 쫓겨서 여러 가지로 참 많이 불편했던 상황이었다. 우리 팀을 총괄하는 분에게 찾아가 하소연도 해보고, 정상적인 프로세스 동작을 버리고, 다시 비 정상적인 동작으로 돌려놔야 하는 현실이 너무 열받아서 한참을 불편한 마음으로 다녔었다.

시간이 지나, 해당 시스템을 사용하는 사용자에게 라이브 하여 직접 사용할 수 있도록 제공했을 때 결국 막아두었던 정책들을 모두 풀어주어야 한다는 이야기를 들었다. 기존에 풀었던 것 외에 정말 모든 정책을 다 풀어야 했다. 빡빡하게 막아두게 되면 오히려 업무를 처리할 때 불편함이 생겼기 때문이다. 돌이켜보면 결국 정상적으로 시스템을 만드는 것이 도메인 특성에 맞지 않는 경우도 있다는 사실을 인정하기로 했다. 오히려 시스템 적으로 완벽하게 구현하는 것이 사용성을 떨어트리는 일이 될 수 있다는 것을 깨닫게 되는 순간이었다.

그렇다면 나는 성장했는가.

결론만 말한다면, "YES"라고 대답할 수 있겠다. 내 안에 틀에 박혀서 이게 올바른 시스템적 동작이지! 내 안에 사용자를 만들고 그 사용자가 당연하게도 매우 똑똑해서 시스템적인 이해를 다 가진 상태로 사용할 것이라고 착각하고 완벽히 돌아가는 시스템만을 상상하고 시스템을 만들었으니.. 서비스 기획에 대한 경험 부족이 완벽하게 나타나는 순간이었고, 최대한 모든 규칙을 다 지켜 기능을 만들어도 결국 기존 사용자들이 불편하다면 그것을 무조건적으로 강제하는 것은 올바르지 않았다. 생각해 보면 그렇다. 세상의 모든 규칙은 올바름을 위해 만들어졌을 것이다. 그렇게 해야 좋은 쪽으로 흘러갈 수 있을 것이라는 믿음이 있었기 때문일 것이다. 그런데 과연 세상은 올바른가? 그렇지 않다 올바름을 위해 만들어진 규칙들이지만 그 규칙들을 강제한다고 해서 올바르게 흘러가지 않는다. 시스템도 똑같은 것 같다. 결국 사용자는 사람이고 사람을 이해하고 사용자가 어떻게 사용했었는지에 대해 명확히 더 이해하는 습관이 필요하다.

해당 화면 외에도 나는 2023년 몇 가지의 화면들을 더 기획하고 설계하며, 해당 화면을 사용하는 부서와 담당자를 만났고 이에 따른 경험을 통해 해당 화면에서 특이한 사항은 없는지, 규칙을 무조건 따르는 것이 올바른지 사용성에 문제가 없는지를 따져보는 습관이 생겼다. 내가 더 꼼꼼해질수록 개발자가 들여야 하는 공수는 줄었고 커뮤니케이션적인 부분에서 더 원활하게 이루어질 수 있었다. 2023년의 나는 2022년의 나 보다 확실히 성장했고, 2024년의 나는 2023년의 나보다 한층 더 성장할 것이라 믿어 의심치 않는다.

미끄러짐은 힘을 얻기 위한 원동력이다.

다음은, "기록" 편에서 2023년 회고를 진행해보도록 하겠습니다.

[FE] 새싹에서 나무까지 - CSS 내부여백 [Padding]

Blank_D — Wed, 2 Feb 2022 23:29:17 +0900

패딩 [padding] 이란?

요소 내부 여백(공간)을 지정하는 단축 속성을 뜻한다.

패딩은 내부 여백이 생기는 만큼 요소의 크기가 커지는 것이 특징이다.

01. 기본 값

패딩의 기본 값은 3가지로 구성되어있다.

- 0 : 내부 여백 없음

- 단위 : px, em, vw 등 단위로 지정
- % : 부모 요소의 가로 너비에 대한 비율로 지정

02. 소스 작성예시

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
</div>

.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  border: 4px solid pink;
}
.container .item:first-child {
  padding: 20px;
}

결과

코드를 작성하면 위와 같은 결과 값을 얻을 수 있다. 간단히 설명하자면 위에 있는 div 요소엔 작성된 모든 css 스타일이 적용되어 있으며,
아래 div 요소엔 .container .item 의 스타일 속성만 먹혀있다. first-child 속성을 통해, container .item 에서 첫번째 자식만 해당 스타일이 적용되도록 하였기 때문이다.

개발자 도구(F12)를 통해, 해당 요소의 Style 값을 볼 수 있다.

개발자 도구에서 Computed 탭을 통해 해당 요소에 적용된 여백옵션을 파악할 수 있다. 오른쪽 CSS 속성과 동일하다.

03. 단축속성

단축속성에 대한 설명은 아래 margin 속성에 설명해 놓은 개념을 생각하면 되겠다.

2022.02.02 - [성장일기/Web] - [FE] 새싹부터 나무까지 - CSS 외부여백 (margin)

[FE] 새싹부터 나무까지 - CSS 외부여백 [margin]

Blank_D — Wed, 2 Feb 2022 18:53:39 +0900

마진 margin ?

요소의 외부 여백(공간)을 지정하는 단축속성

특징

- 음수 및 양수를 사용할 수 있다.

값

- 0 (외부 여백 없음)

- auto (브라우저가 여백을 계산) = 가운데 정렬

- 단위 (px, em, vw)

- % (부모 요소의 가로 너비에 대한 비율) 잘 사용하지 않음.

소스 작성예시

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  
}
.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 10px;
}

소스풀이

- 가로 세로 100px 인, 정사각형의 상하좌우 모두 동일하게 바깥여백(margin)을 10px을 줘라.

또한, 마진은 각각의 방향을 선택하여 여백을 줄 수도 있다.

.container {
  
}
.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  margin-bottom: 20px;
}

이렇게 작성하면, 상하좌우에 적용되었던 마진값이, 아래방향에만 20px 적용된다.

단축속성

위에 작성한 코드를 보았듯이, margin 은 상하좌우 전체 또는 개별로 값을 적용할 수 있다. 그렇다면 위에 작성한 코드처럼 각 방향마다 값을 지정해주려면 margin-bottom 처럼 값을 작성해줘야할까? 결론만 말하자면 아니다. 자 그럼 어떻게 작성해야 하는지 알아보자.

margin : 10px; - 상하좌우 .

margin : 10px 20px; - 상하 / 좌우
margin : 10px 20px 30px; - 위 / 좌우 / 아래 = 상 중 하
margin : 0px 0px 0px 10px - 이렇게 작성한 경우는 어떻게 될까? 적용되는 순서는 시계방향 순이다. 즉 상 우 하 좌 이다.

즉, 단축속성이란 각각의 방향을 제어해주는 단축키와 같다.

개별속성

[margin - 방향] 을 입력함으로, 개별적으로 속성 값을 줄 수 있습니다.

작성방법

- margin-top
- margin-bottom

- margin-left

- margin-right

[FE] 새싹부터 나무까지 - CSS 단위

Blank_D — Wed, 2 Feb 2022 18:36:56 +0900

CSS 표현 단위

단위의 종류

01. px [픽셀]

- 화면의 표현할 수 있는 하나의 점

- 가장 많이 사용한다.
작성 예시)

div {
  width: 300px;
  height: 300px;
  background-color: orange;
}

가로와 세로가 300개의 점을 가진 오렌지 색의 박스로 생성된다.

02. % [상대적 백분율]
- 어떤 기준을 가지고, 1~100까지 백분율로 나타내는 값
- 일반적인 기준은 브라우저를 따르지만, 부모와 자식의 관계에서는 자식은 부모 크기를 기준으로 사이즈가 조정된다.

.parent {
  width: 300px;
  height: 300px;
  background-color: orange;
}
.child {
  width: 50%;
  height: 50%;
  background-color: blue;
}

이렇게 코드를 작성한다면, Class가 partent 인 div는 가로/세로 300px 의 오렌지 박스가 생길 것이고,
Class 가 child 인 div 는 부모의 크기인 300px의 50% 사이즈인 150px의 블루 박스가 생길 것이다.

03. em [요소의 글꼴 크기]
- 하나의 요소[태그]가 가지고 있는 글꼴 크기

!! Tip. html은 지정된 폰트 사이즈가 없다면, 기본적으로 16px을 폰트 사이즈로 사용한다.
작성 예시)

div {
  width: 20em;
  height: 20em;
  background-color: orange; 
}

위와 같이 작성할 경우 div 요소가 가진 기본적인 글꼴 크기가 없기 때문에 html의 글꼴 크기인 16px을 사용한다.
따라서 [폰트 사이즈] 16 x [em] 20 = 320px 크기의 div 박스가 생성된다.

즉 em을 통한 박스 사이즈 계산 방법은 [폰트 사이즈] x [em] = px이다.

04. rem [루트 요소(html)의 글꼴 크기]

- root (최상위 요소)의 글꼴 크기 - 무조건 html에 지정된 글꼴 크기를 따른다.

html {
  font-size: 16px;
}
.parent {
  font-size: 10px;
}
.child {
  width: 20rem;
  height: 20rem;
  background-color: orange;
}

코드의 형태를 이렇게 가져가게 되면, child는 부모의 폰트 사이즈에 영향을 받지 않고, html 에 적용된 폰트사이즈에 영향을 받게 되며

16 x 20 = 320px 크기의 div가 생성될 것이다. css 내 html 요소를 따로 작성해주지 않고 rem을 사용해도 기본적으로 16px로 곱하기되어 나타난다.

viewport
브라우저 상에서 출력되는 페이지 전체 영역

05. vw [viewport width]
- 가로 너비의 백분율
ex) 1vw = 1/100
- 일반적으로 Viewport를 1920x1080이라고 한다면, vw는 1920에 해당하며, 1920 = 100% 로 볼 수 있다.
그렇다면 50vw는? 1920의 절반인 960px이다.
- 또한 vw로 설정된 값은, 브라우저의 Viewport 변화에 따라 유동적으로 변경된다. [반응형 대응]

06. vh [viewport height]
- 세로 너비의 백분율
ex) 1vh = 1/100
- vw 특징과 동일하다.

[FE] 새싹부터 나무까지 - CSS 속성 [박스모델]

Blank_D — Wed, 2 Feb 2022 17:28:50 +0900

CSS 속성 [Property]

01. 박스모델

- HTML요소의 기본적인 모양을 만드는 것.

- 가로,세로 너비 및 내 외부 여백 등을 가진 박스

기본구조

width [가로] / height [세로]

기본 값(요소에 이미 들어있는 속성의 값)은 = auto (브라우저가 자동으로 너비를 계산)

단위 : px, em, vw 등 단위로 지정하며 주로 사용하는 값은 px

max & min 속성

max-width / max-height : 요소가 커질 수 있는 최대 가로/세로 너비

사용할 수 있는 값 : none(최대 너비 제한 없음) , auto , 단위 (px, em, vw 등)
특징
- 일반적으로 사용하는 값은 none & 단위를 지정해준다.
- auto 값은 잘 사용하지 않는다.

min-width / min-height

사용할 수 있는 값 : 0 , auto, 단위 (px,em,vw) 등
특징
- 음수는 사용할 수 없고, 양수만 사용할 수 있으며 양수의 가장 작은 값인 0 부터 사용할 수 있다.
- auto 값은 잘 사용하지 않는다.

대표적인 박스모델 요소

<span>
대표적인 inline 요소

특징
- 요소가 옆으로 배치된다.
- 포함한 콘텐츠의 크기만큼 자동으로 줄어듬 (가로/세로 동일)

- 가로사이즈와 세로사이즈를 제어할 수 없다. [width 및 height 값을 입력해도 먹히지 않는다.]

span의 특징

<div>
대표적인 block 요소

특징
- 요소가 위에서 부터 쌓인다.
- 가로 사이즈가 적용되어 있지 않는경우 , auto 값으로, 브라우저 가로사이즈를 최대로 채우려고한다.
- 세로 사이즈는 포함한 컨텐츠의 세로 사이즈만큼만 늘어난다.

div 요소의 특징

(요소에 이미 들어있는 속성의 값)(요소에 이미 들어있는 속성의 값)

[FE] 새싹에서 나무까지 - CSS 선언방식

Blank_D — Wed, 2 Feb 2022 12:00:05 +0900

개요

CSS 를 선언하는 방식 및 각각의 장점과 단점에 대해 설명한다.

CSS 선언방식

CSS의 선언방식은 총 4가지로 구성되어 있다. [내장방식 | 인라인방식 | 링크방식 | @import 방식 ]

-
1. 내장방식

html 문서 내 <style> 태그를 사용하여, 요소 내에 내장하여 작성한다 하여, 내장방식이라 한다.
-작성예시

<style>
div {
color : red;
margin: 20px;
}</style>

- 장점

별도의 CSS 파일을 만들지 않아도, HTML 에서 바로 적용할 수 있다.

- 단점

CSS 내용이 많아질 경우, 한번에 처리하기 쉽지않고, 유지보수가 어렵다.

그렇기 때문에 프론트엔드 개발방식은 HTML , CSS , JS 파일을 따로 구분하여 관리하는 것이 일반적이다.

2. 인라인방식

HTML의 요소에 전역속성인 style 속성을 추가하여 직접 스타일을 작성하는 방식

전역속성이란?

-작성예시

<div style= "color: red; margin: 20px;"><div>

- 장점

별도로 요소를 찾는 행위를 할 필요가 없다. - HTML의 선택자(태그)를 작성해줄 필요 없다.

- 단점

CSS 우선순위가 무조건 상위에 존재한다.

CSS 파일 내에서 동일한 선택자에 스타일을 적용해도, 인라인방식으로 적용된 스타일이 우선 적용된다.

내장방식과 동일하게, 유지보수에 악영향을 끼친다.

3.링크방식

병렬방식을 사용한다.

- 작성예시

<link rel="stylesheet" href="./css/main.css">

- 장점

HTML 과 CSS 문서를 구분하여 관리할 수 있어 유지보수가 간편하다.

대표적으로 많이 사용하는 선언방식이다.

- 단점

내가 생각하기에는 딱히 없다.

4. @import 방식

CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식

- 작성예시

<link rel="stylesheet" href="./css/main.css"> 작성을 통해, main.css 문서를 HTML 문서에 연동시켰다.

--main.css--
@import url ("./box.css");
div {
color: red;
margin:20px;
}

--box.css--
.box {
background-color : red;
padding: 20px;
}

main.css 문서 내, import 라는 쿼리를 실행시켜서, 주변에 box.css 라는 문서를 연결시켜라 라는 명령이다.

이렇게 HTML 문서에 링크방식을 통해 main.css 문서를 가져오게 되었고, main.css 에서 @import 를 통해 box.css 또한 HTML 문서로 같이 불러오게 된 것이다.즉 외부 CSS 문서를 링크 시킬 때 많이 사용하는 방식이며, 직렬방식이라는 특징을 가진다.

직렬방식이란?

직렬방식이란, 말 그대로 순서에 따라 차례대로 불러온다는 뜻이다.

위 문서를 예시로 설명해보자면 HTML > main.css > box.css 순으로 불러온다는 뜻.

@import 방식은 link 보다는 많이 사용되어지는 방식은 아니다.

[FE] 새싹에서 나무까지 - CSS 기본 문법,주석

Blank_D — Mon, 31 Jan 2022 01:42:38 +0900

개요

CSS의 기본적인 문법안내

들어가며

HTML이 웹의 구조를 짜는 일이라면, CSS는 기본 구조의 스타일을 잡는 역활을 한다. 이 챕터에서는 기본적인 CSS의 문법에 대하여 작성했으며, CSS관련해서 공부하는대로 작성할 예정이다. 내용에서 나오는 화면예시는 Codepen 에서 작성한 코드를 그대로 캡쳐하여 이해를 돕도록 하였다.

내용

가장 기본적인 예시로, div 태그에 원하는 문장을 넣은 후, 아래 CSS 코드를 적용하면 왼쪽에 있는 결과값이 출력되는 것을 볼 수 있다.

해당 CSS 는 3가지의 스타일을 잡은 것으로 내용은 아래와 같다.

div 태그는 다음과 같은 특성을 가져라!

글씨크기는 50 px (font-size: 50px;)
컬러는 파란색 (color: blue;)
글씨의 장식은 밑줄 (text-decoration: underline;)

만약 div가 아닌, 다른 태그로 변경하게 된다면 어떻게될까?

해당 CSS 스타일이 적용되지 않는다. 왜냐하면 현재 CSS가 선택하고 있는 HTML 태그는 div 밖에 없기 때문이다.

즉, CSS에서 매칭하는 HTML 요소가, HTML 안에 존재하지 않는다면, 해당 CSS는 적용되지 않는다.

또한 CSS 에서, 중괄호 { } 영역 앞에 작성하는 HTML 태그를 특정한 요소를 선택한다고 하여, 선택자 라고 명시한다.

CSS 기본문법

선택자 {속성 : 값} 이런 형태의 문법으로 작성된다.

예시) div { color : blue; }

즉 CSS의 기본문법은 선택자 / 속성 / 값 으로 나뉘어 정의할 수 있는데 다음과 같다.

선택자 : CSS 스타일을 적용할 대상 (Selector) - div, h1, span, p 등
속성 : CSS 스타일의 종류 (Property) - color, font-size, text-decoration 등
값 : 해당하는 스타일이 가질 수 있는 값 - color : blue; | font-size : 50px ; 등

해당 문법을 알기쉽게 풀어서 이야기 해보자면, 선택자 { 속성 : 값 ; } 은 해당 선택자 의 속성 : (속성은) , 값 ; (이 값이다)
즉 콜론 (:) 및 세미콜론(;) 이 문장을 이어주고, 마치는 역활을 하는 것이다.

CSS 코드 작성방법

앞에서 CSS의 기본문법에 대해서 배웠는데, 그렇다면 CSS 코드를 작성할 때는 어떻게 해야할까?
앞에서 배운대로 라면, 선택자 { 속성 : 값 ; 속성 : 값 ; 속성 : 값; 속성 : 값 ; } 인데, 이렇게 가로로 길게 작성할 때, 3~4개의 속성과 값 정도면 괜찮을 수 있으나, 10~100개 까지 늘어난다고 가정해보자, 과연 그걸 제대로 읽을 수 있을까?

개인적으로 아래와 같은 작성방법을 선택하길 바란다. 아니 해야한다. 그러지 않으면, 다른 사람이 읽기도 힘들 뿐더러, 자기도 힘들 테니까.

div {
color: red;
margin : 20px;
}

한 줄에, 하나의 속성과 값만 들어가는 형태. 즉 줄바꿈하여 작성하는 형태로 작성하기를 바란다.

CSS의 주석처리

CSS 주석처리는 다음과 같다.

/* 설명 작성 */
div {
color: red;
margin: 20px;
}

/* 주석 작성 시작
*/ 주석 작성 마침

해당 주석처리에 대한 단축키는 [(윈도우) Ctrl + / ] [(맥) Cmd+ / ] 이다.

[FE] 새싹에서 나무까지 - HTML 전역속성

Blank_D — Mon, 24 Jan 2022 23:38:19 +0900

개요

HTML의 전역속성에 대해 소개한다.

들어가며

HTML 에서 이야기는 '속성' 이라는 개념을 한번 설명하고 글을 읽기를 추천한다.

속성이란?

열리는 태그에 작성하는 HTML 의 기능을 확장해 주는 기능을 의미한다.
즉 href , target, src 등 태그 안에 사용하는 속성(attribute)을 뜻하는데 사용방법은 아래 예시와 같다.
예시) <a **href**="www.naver.com" **target**="_blank">네이버이동</a>
풀이 = a라는 태그의 네이이버 이동을 할건데, 링크(href)는? www.naver.com 이고, 페이지를 이동할 때는 새로운 창(targer="_balnk")으로 열릴거야 라는 조건을 추가하여 동작시키는 것을 의미한다.
-
이와같이 <a> 라는 태그의 기능을 더하여 주는 것이다.
-
각 요소들은 자신이 사용할 수 있는 속성이 정해져 있다
<img href="?"> 이미지 태그에 href 속성을 사용할 수 있을까?
없다. src도 링크고 href도 링크이지만, img 에서는 href 속성을 사용할 수 없다.

전역속성이란?

전체의 영역에서 모두 사용할 수 있는 속성이다.
대표적인 속성 : <title> <style> <class> <id> <data>

<title> : 해당하는 요소의 설명을 명시하는 전체영역에서 쓸 수있는 HTML 속성이다.
<style> : link 를 이용하여, css 파일과 연동시킬 수도 있고, HTML에서 전역속성을 이용하여 바로 적용할 수도 있다.
<class> : 요소를 지칭하는 이름이며, 특징은 중복 가능한 이름을 지을 수 있다는 것이다.
<id> : 클래스와 동일하게 요소를 지칭하는 이름이지만, 고유한 이름이다. 자주 사용하지 않지만 중요한 위치에 해당 속성을 사용하는 것을 선호한다.
<data> : 요소에 데이터(텍스트)를 지정하는 것을 의미하며, 태그 내에 해당 데이터를 저장하는 것을 의미하며 JS 와의 연동에서 자주 사용한다.

[FE] 새싹에서 나무까지 - HTML 핵심요소

Blank_D — Tue, 18 Jan 2022 01:48:02 +0900

개요

HTML 에서 가장 많이 사용하는 핵심요소 알아가기

시작하며

기획자로써 개발자와의 소통을 더 원할하게 하기위해 직접 개발현장으로 뛰어들어 공부하며 얻은 내용을 나만을 위한 기록이 아닌,개발지식이 필요한 이들을 위한 기록이 되길 바란다.
주요 작성내용은 프론트엔드 개발에서 가장많이 사용하는, 핵심태그들 위주이며
해당 내용은 패스트캠퍼스에서 공부한 내용들을 내가 이해한 그대로 작성한 내용이다.

핵심요소

[DIV]

Division 의 약어로 어떠한 영역을 잡거나, 어떤 개념들을 하나로 묶을 때 사용한다.특징은 아래와 같다.

Block 요소특성을 가진다 [레이아웃을 만들 때 많이 사용한다.]

특별한 의미없이 구분을 위한 요소이다.

[H]

Heading 의 약어로, 1-6까지 사이즈가 제공되며 어떠한 제목을 의미한다.
작성된 내용을 묶는 용도로 사용된다. 특징은 아래와 같다.

Block 요소특성을 가진다.

H1~H6 까지 크기가 존재하며, 숫자가 커질수록 폰트사이즈가 작아진다.

숫자가 작으면 작을 수록, 더 중요한 제목을 정의한다.

책의 목차와 같다고 생각하면 된다.

[P]

Paragraph 의 약어로, 어떠한 문장을 구분하는 용도로 사용된다.
P 태그로 모든 문장을 구분할 필요없이 DIV로 묶어서 사용해도 된다.

Block 요소특성을 가진다.

글자를 이용하지만, 단일글자로 사용하기에는 적절하지 않다.

글자이지만, inline 요소특성을 지니고 있지 않다.

[img]

Image 의 약어, 태그의 특징은 아래와 같다.

가장 대표적으로 inline 요소특성을 가진다.

inline 요소는 [글자]를 취급하는 용도로 사용하긴 하지만, 글자가 아닌 태그중 대표적인 inline 속성태그 중 하나이다.

이미지를 삽입하기 위해선 경로를 명시해야하며, [src] 라는 속성을 사용하여 경로를 명시하며, 이미지를 출력하지못한경우 노출되는 alt[alternate]속성에 내용을 입력해주어야 한다.

즉, [src] 와 [alt] 속성은 img 태그의 필수속성이다.

작성예시
<img src="링크" alt="이미지가 노출되지 않는 경우 해당문구 노출" />
alt 옵션은 일반적으로 "엑박 떳다!" 할 때 이미지 옆에 노출되는 글자이다.

[Ul]

Unordered List 의 약어, 순서가 필요하지 않은 목록을 의미한다. 특징은 아래와 같다.

주관적인 순서를 정리할 때 사용한다. 순서가 특별히 필요하지 않은 경우

ol [ordered List] 태그가 존재하지만, ul에 비해 사용빈도가 낮다. ul의 반대개념이라고 생각하면 된다.

[li]

List Item 의 약어, 목록 내 각 항목을 의미한다. 일반적으로 목록은 list 항목을 item 이라는 단어를 사용한다.

목록 태그인 [ul],[ol] 과 셋트로 함께 사용된다.

[a]

Anchor 의 약어, 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소를 의미한다. 특징은 아래와 같다.

일반적으로 '링크를 건다' 라고 말할 때 사용하는 태그이다.

다른 홈페이지 주소를 입력된 텍스트에 '건다' 라는 개념이다.

작성예시
<a href="https://www.naver.com">Naver</a>
<a href="https://www.google.com" Target="_blank>Google</a>

위의 태그에서 'Target' 은 [a] 태그의 속성이며, 링크를 걸어 이동할 때, 어떻게 페이지를 노출할 것인지 설정하는 속성이다. '_blank' 는 새로운 탭에 페이지를 열겠다는 의미이다.

[span]

inline 요소로, 특별한 의미없이 단순한 구분을 위한 요소이다.

작성예시
<span>동해물</span>과 백두산이 마르고 닳도록 한 문장에서 구분을 위해 span 태그를 사용

CSS 스타일처리 예시
<style> span { color:red;} </style>

결과
동해물과 백두산이 마르고 닳도록

이렇게 한 문장에서 특정한 부분을 구분짓거나, 범위를 잡을 때 사용한다.

[br]

break 의 약어로, '줄바꿈' 이라는 의미를 가지고 있다. 특징은 아래와 같다.

문장에 사용하여 인위적, 강제적으로 줄바꿈 처리를 할 수 있다.

작성예시
동해물과 백두산이</br>마르고 닳도록

결과
동해물과 백두산이마르고 닳도록

[input]

inline 요소이면서 block요소의 특성을 가지고 있다.

사용자에게 어떠한 데이터를 입력받는 요소이다.

inline-block 으로 표현한다.

inline-block 이란, 글자요소이긴 하지만 상자요소의 특성을 어느정도 사용할 수 있다는 특징이 있다.

'특징이 있다'라는 말을 풀어서 사용하자면, 글자요소의 특징은 수평으로 쌓이는 inline 특성을 가지고 있으나, 가로/세로 및 여백을 조정할 수 있는 block 의 특성도 함께 가지고 있다는 의미이다.

input 태그에서 사용되는 속성은 아래와 같다.

[value]
사용자가 입력하기 전에, 미리 값을 입력해 놓는 것을 의미한다.
개인적으로는 쓰는걸 본적이 없다.
<input type="text" value="여기에 입력해보세요" />
<input type="입력받을 데이터형태" value="미리 입력된 값" />
결과

[placeholder]
사용자가 입력창에 어떤 내용을 작성해야하는지 '힌트'를 제공하는 속성으로,
보편적으로 많이 보이는 속성이다.
<input type="text" placeholder="여기에 입력해보세요" />
<input type="입력받을 데이터형태" placeholder="사용자가 입력할 값의 힌트" />
결과

[disable]
입력창을 비활성화 시키는 속성으로, 해당 속성은 '빈 태그' 처럼 속성만 입력한다.
<input type="text" disabled />
결과

[checkbox]
사용자에게 체크 여부를 입력받는 데이터의 종류이다. Checkbox 기능 사용시 어떤 항목을 체크하는 것인지 인지할 수 있도록 'label' 이라는 인라인속성 태그를 사용하여 묶어서 표현한다.
작성예시
<label> <input type="checkbox" />Apple </label>
<label> <input type="checkbox" />Banana </label>

이런식으로 각 항목에 대한 라벨링을 진행한다.

결과

Apple

Banana

번외
미리 체크를 하고싶은 경우
<label> <input type="checkbox" checked />Banana </label>
결과

Banana

[radio]
제공된 항목 중에서, 1가지만 선택할 수 있는 특성을 가진다.
체크박스와는 다르게, 각 항목을 하나의 이름으로 그룹화 할 수 있다.
그룹화되면 그 그룹안에서 1가지만 선택할 수 있다.
기본적으로 그룹을 지을 수 있는 구조여야하며, name 속성에 같은 값을 명시해주면 그룹이 된다.
작성예시
<label> <input type="radio" name="fruits"/>Apple </label>
<label> <input type="radio" name="fruits"/>Banana </label>
위와같이 , 각 항목에 대하여, name 속성을 활용해 그룹화를 시켜준다.결과
Apple
Banana

[table]

표를 만들 때 사용하는 요소.
표 - 행과열의 단위로 구성된 하나의 집합 ex)엑셀, 구글스프레드시트 , 특징은 아래와 같다.

큰 의미로 block 요소이고 그 안에서 table 요소로 다시 구분된다.

상세내용을 작성 시, 행과열로 구성한다.

'tr' = 행 , 'td' = 열

작성순서는 '행'이 우선되고 그 안에 '열'이 들어가야한다.

작성예시
<table> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table>

티스토리 자체 문제인지는 모르겠으나, 단계가 나뉘어 작성되면.. 계속 코드로 인식하는 일이 발생해서 한줄로 적었다.

결과

A B

C D

마치며

오늘, HTML에서 가장 주요하게 사용되는 핵심요소들에 대해 공부한 것들을 작성해 보았다. 주니어 기획자로써, 아직은 새싹이지만 거대한 거목이 될 때까지 최대한 지속적으로 공부한 것들을 기록하고 나의 성장과 여러분들의 성장에 도움이 되기를 바란다.

[리뷰] 키크론 K3 리니어 갈축 개봉기 (와디즈)

Blank_D — Fri, 26 Mar 2021 13:36:37 +0900

처음쓰는 리뷰

그동안 쓰고 싶었던, 키보드 중 하나 키크론에서 K3모델을 한글판으로 펀딩을 진행한다고 하여, 알림을 신청해놓고 기다리고 있었다.
재빠르게 슈퍼 얼리버드로, 팜레스트와 키크론 K3 White LED 모델을 펀딩할 수 있었다. 추가로 한글 키캡이 싫어서 영문 키캡과 휴대용으로들고다닐 수 있는, 키보드 파우치도 함께 구매했다.

예정날짜에 결제가 되고, 배송을 기다리고 있는데 배송이 지연된다는 소식을 들었지만, 아쉬움만 있을 뿐 어차피 펀딩은 기다리는 맛으로
하는거지 하는 마음으로 차분히 기다렸고, 현재 예상보다 빠르게 도착해서 이렇게 리뷰를 쓰게 되었다

어제출발했는데, 오늘 도착하다니 쿠팡인줄 알았다.. 진짜로

시작

배송된 키보드와 팜레스트, 파우치 그리고 기타 등등

상당히 컴팩트한 포장이었다. 내가 시킨 구성은 위에도 말했듯이, [키보드,팜레스트,사피아노 파우치,키캡] 이렇게다. 근데 뭔가 하나가 더 왓는데, 알고보니 배송지연 보상인 지티기어 키스킨 이라고한다.

그나저나 요즘엔 박스패키징의 씌우는 비닐이 뜯을 수 있는 부분을 제외하고, 핏하게 떨어지는 게 유행인가보다 애플의 영향이겠지?, 어쨋든 처음 배송을 받았을 때 느낌은 생각보다 나쁘지 않았다.

키크론 K3 전면 박스패키징

비닐을 제거하고, 전면에서 찍은 박스패키징이다. 앞쪽에 키보드 일러스트와, 키크론과 짦은 문구가 새겨져있다. [무지개 박인가..?]
전반으로 깔끔하고, 검은색 박스패키징이라 고급진 느낌을 받을 수 있었다.

박스개봉

박스를 개봉하면 (생각보다 빡빡해서 잘 안열린다) 바로 키보드가 보인다. 얇은 비닐로 포장되어있었고, 제품을 보호하는 느낌의 비닐은 아니고 그냥 먼지나 이물질을 최소화 할 수 있는 정도로 씌워져 있는것 같다. 그리고 위쪽 공간에 박스인줄 알았더니, 그냥 안에 있는 구성품이 흘러나오지 않도록 막는 막 같은 역활이었다.

박스패키지 구성품 전체

패키지 안에 있는 구성품 전체를 꺼내서 열어보면 이런 느낌이다. 케이블,여분의 키캡, 리무버, 가 전체 구성품이고, 비닐을 제거한 키보드는
플라스틱 커버로 어느정도 보호가 가능할 것 같다.

호두나무 팜레스트

K3 전용 호두나무 팜레스트 이다. 슈퍼얼리버드는 구성품에 팜레스트가 들어가 있었는데, 알고보니 생각보다 가격이 있는 제품이었다.
키크론의 패키지는 전반적으로 비슷한 느낌과 구성을 가지고 가는 느낌을 많이 받았다.

팜레스트 뒷면

팜레스트를 꺼내서 봤는데, 아니 이거 꺼낼때 너무 빡빡하다, 박스를 열어서 제품을 꺼내려고 했는데 손가락이 들어갈만한 공간 자체가 없다.
그나마 조금 나와있는 비닐을 살살 건드려서 꺼냈다. 제품이 흔들리면 깨질 위험이 있어서 그런것 같긴한데, 너무 빡빡해,, 어쨋든
뒷면에는 흘러내려가지 않도록 고무패드가 장착이 되어있다. 빛 때문에 팜레스트가 살짝 밝아보이는 생각보다 딥한 갈색이다.

키보드와 팜레스트

키보드와 팜레스트를 같이 두면 이런 느낌이다. 팜레스트 두께가 생각보다 얇아서, 뭐야 이거 왜이렇게 얇아? 했는데, 키보드랑 함께하니
이거보다 찰떡일 수 없다. 생각보다 잘어울리고 이쁘다

사피아노 레더 파우치 패키지

역시나 동일한 패키지의 파우치다. 근데 난 확실히 이런 패키지가 이쁘다고 생각이 든다. (Simple is best 다) 어쨋든 각설하고 개봉해보자

사피아노 레더 파우치 - 오렌지

사피아노 파우치 오렌지가 제일 이쁘다고 생각해서 구매를 했는데, 첫 인상은 생각보다 쨍하다. 펀딩할때는 이런색이 아니라 조금 연했던 것 같은데, 어쨋든. 박스를 제거하고 나오면 이렇게 비닐에 포장되어있는 레더파우치가 나온다.

사피아노 레더 파우치

진짜 이건, 미쳤다. 비닐을 제거했더니 진짜 너무 이쁘게 파우치가 나온다. 여닫이 형식도 내가 좋아하는 형태라서 바로 구매해야지 했는데 와 이건 진짜 너무이쁘다. 키보드가 아니라 다른거 넣어서 들고다니고 싶을 정도로 이쁘다. 박음질이나 마감도 생각보다 퀄리티가 나쁘지 않다. 오른쪽에 키크론 로고가 디보싱 되어 들어가 있는것도 생각보다 감각적이다.

마감 및 재질

근접샷이다. 앞에서 말했지만, 생각보다 가죽의 느낌이나 실 마감처리가 나쁘지않다. 혹시 구매할 의향이 있으신 분들이 있다면 파우치는 꼭 구매하시길 추천드린다. 꼭 오렌지로 진짜로 두번 사세요

키크론 키보드 + 레더 파우치

레더 파우치에 키크론 키보드를 넣으면 이런 형태다. 양 사이드가 살짝 남아서 라인을 넣으면 충분히 딱 맞게 들어갈 것으로 생각된다.
진짜 너무 이쁘다 맨날 들고다닐 생각하니 흥분된다.

키크론 자체 리뷰는 여기서 끝이다. 이 다음부터는 추가로 온 키스킨에 대해서 언급할 예정이다. 좋게 써줄 수 가없다 이건..

키스킨 (차라리 주지말지)

GT gear 키스킨

키크론에 키스킨 적용

배송지연 보상으로 같이온 키스킨이다 네이버에 검색해보니 2,900원이더라. 똑같은 제품인지는 모르겠으나.. 어쨋든 준건 감사하다.

생각보다 쫀쫀하다. 그런데,, 아니 이건 어쩌라는건지 진짜 모르겠다.. 이걸 어떻게.. 써야할지는 잘 모르겠으나 일단 줬으니 가지고 있어보자.

지티기어

스킨을 씌우고 타건도 해봤는데, 안하는게 났다. 정말 솔직히 말해서 키크론 K3 자체는 너무 훌륭하고 좋은 제품이다. 키스킨은.. 사용을 안할 것 같다. 정말로.. 이건 너무 아쉽다. 배송지연 보상을 받은게 기분이 더 별로인 것 같다. 아마 이건 공통적으로 모든 펀딩하신 분들이 그렇지 않을까.. 어쨌든 이걸로 리뷰 끝!

펀딩 후기

와디즈에서 맘먹고 큰 금액을 펀딩해본건 이번이 처음이다. 펀딩이라는 성격자체가. 제품을 정식으로 출시하기 전, 시범형태로 먼저 받아보고 체험하고 정식출시 가격보다 저렴하게 받는다는 메리트가 있어서 하는거라고 생각한다. 키크론 K3의 경우는 이미 해외에 출시가 되어있었고, 한글각인이랑 한글화해서 보내는 것으로 펀딩을 하게 된 건데, 나는 생각보다 기다림이 지루하지 않았다. 물론 와디즈에 마음이 많이 상해서 새소식이 올라올 때마다, 아주그냥 욕이란 욕은 다 먹는 투비네트웍스가 조금 안타까울 뿐이었다.

어쨋든 최선을다해서 빠르게 배송을 맞춰준 투비네트웍스에게 감사하고, 좋은 제품을 조금이나마 저렴하게 구입할 수 있어서 너무 좋았다.

이걸로 글을 마치겠다.

끝