“우리는 서로를 실망시키는 데 두려움이 없는 사이가 됐으면 좋겠어요.”

라디오를 막 시작했을 즈음 무심결에 했던 말이다. 이샛별 작가가 이 말이 마음에 남았는지 라디오 프로그램 SNS 계정에 글귀로 남겼는데, 내가 앞으로 청취자들과 꽤나 깊은 관계가 되고 싶어 하는 욕심이 적나라하게 드러난 말이라 스스로도 깜짝 놀랐다. 나는, 아니 우리는 모두, 사회성이란 것을 갖추게 되었고 그것은 아주 가깝지 않은 누군가에게 ‘달’처럼 존재할 줄 아는 능력을 포함한다. 상대가 불편하지 않을 만큼의 단면을 보여줄 줄 안다는 말이다. 한 끗 차이로 예의, 사교성, 가식을 넘나드는 기술이겠다. 

아무에게도 미움받지 않는 사람은 위험하다. 설령 대중적으로 그런 사람이 존재할지언정, 측근들 사이에서 차라리 험담이 떠돈다면 그건 다행이다. 한 명의 사람이 누구를 대하든 매끄럽다면, 그 사람은 흡사 존재하지 않는 것과도 같은 거니까. 그걸 아무리 알고 알아도, 미움은 어릴 때 꼭 먹어야 된다고 엄마가 얹어주던 맛없는 반찬처럼 삼키기가 싫다.

열 명의 사람 중 두세 명에게서 미움을 받는다면 문제가 없어 보인다. 그러나 그게 백 명, 천 명이 넘어가면 두렵다. 퍼센티지로는 동률이어도 숫자로 세어지는 마음이 미움이다. 살면서 대하는 사람들이 늘어나며, 어느 순간 이에 대한 선택을 하기로 했다. ‘그럼에도 불구하고 생긴 대로 살아야 겠다는 것’ 말이다. 방송을 하면서부턴 더더욱 그랬다. 어쩔 수 없이 호불호의 평가를 받아야 되는 일을 시작한 이상, 내 방향성은 더 명확해졌다. 그건 바로 대충 미움받고 확실하게 사랑받는 것이다. 

당신 곁의 수많은 거울들을 떠올려보라. 어떤 거울 앞에서 나는 가장 괜찮은 사람이었는가?

소중한 사람일수록 잘 바라보아야 한다. 세심히 살펴야 한다. 무언가를 제대로 보려면 최소 한 발자국 정도는 떨어져 있어야 한다. 사람의 마음도 그렇다. 당연히 잘 안다고 여기는 순간, 관계는 V3가 깔리지 않은 컴퓨터가 된다. 

밤하늘의 셀 수 없는 별들이 그러하듯 사람 마음의 모양은 전부 다 다르다. 선을 긋지 않는다는 건, 모양이 없는 액체 괴물처럼 살아가라는 말로 들린다. 그러니까 선을 긋는 건, 여리고 약한 혹은 못나고 부족한 내 어딘가에 누군가 닿았을 때 ‘나의 이곳은 이렇게 생겼어’라고 고백하는 행위다. 반대로 남들보다 더 관대하거나 잘난 부분이 있다면 그 부분은 시원하게 트여 있을 것이다. 이 부분은 나라는 사람을 탐험하는 상대방이 판단하는 부분이 된다. 그래서 어떤 관계는, 나도 몰랐던 내 영역을 알게 해준다. 그렇게 우리는 서로를 통해 확장되기도, 스스로를 알아가기도 한다.

살다 보면 부득이 선을 긋지 않아도 되는 사람들을 만난다. 그런 이들은 나름의 시간과 노력을 들여 나를 관찰해주고, 그걸 토대로 내 성향을 점선으로나마 그릴 줄 아는 사람들이다. 그리고 그 밑그림이 나의 실제와 크게 다르지 않을 때, 나는 무장해제되곤 한다. 이것이 얼마나 귀한 일인지 알기에, 이런 사람을 만나면 나 또한 열심히 점선으로 상대를 스케치해본다. ‘이곳이 예민하겠지’, ‘이곳을 흥미로워하겠지’ 하면서. 그리고 이런 식으로 그려지는 사람의 모양은 수시로 바뀌기도 하기에 끊임없는 관찰이 필요하다. 이 섬세한 과정을 퉁치는 말이 ‘배려’인 것 같다. 그러므로 나와 상대방 사이에 있는 틈은 서로가 서로를 잘 바라보기 위한 것일 테다. 

낭만적이지 못한 표현이지만, 그 사이렌이 울리는 쪽은 대개 지는 게임을 시작하게 된다. 문제는 애초에 게임이 아닐 일을 게임으로 만들어버리는 데 있다. 

이렇게 나의 관점을 의심하면 또 다른 관점으로 어떤 것을 바라볼 수 있다. 그리고 그 과정은 확실히 나의 세계를 확장하거나 견고히 해주었다. 때로는 관용적으로 쓰는 말들은 잘못 쓰인 채로 굳어진 근육 같다. 익숙해져서 더이상 통증이 느껴지지 않지만, 점점 더 악화되어가는 상태…. 습관적으로 툭툭 내뱉는 표현을 의심해보면 조금이라도 빨리 바로잡는 게 좋은 그 무언가를 발견할 수도 있을 것이다. 

배려라는 것은 어쩌면 피냄새를 맡을 줄 아는 감각이다. 마음 여기저기에 움츠러든 자국이 많은 사람들은 서로를 소리 없이 반긴다. 낯가리는 이들이 서로에게 한 발짝 다가서는 사소하고 고요한 순간들이 있다. 이를테면 왁자지껄한 회식자리나 MT 같은 곳에서 겉도는 이들이 서로를 알아보고 조용히 다가가 앉는 풍경, 또는 발표를 망쳐서 붉어진 얼굴의 동료에게 가볍게 농담을 던지거나 기운을 북돋아주는 일.

시간으로 잴 수도 없는 찰나겠지만, 그 안에서는 거대한 두 개의 우주가 만난다. 그리고 이 아름다운 충돌은 움츠러들었던 것의 몇 배만큼 서로를 자라나게 만든다. 

포장은 편리와는 거리가 멀다. 따라서 발명가들의 뇌에서 탄생할 법한 게 아니다. 오히려 무용에 가깝다. 그렇지만 포장은 시간을 들여 신경 쓴 마음을 표현하는 수단이다. 즉 포장이라는 것을 가장 먼저 고안한 사람이 누군지는 몰라도, 애틋한 마음을 가진 적이 있고 그것을 전달할 대상이 있었음에는 틀림없다.

낭만적인 추론에도 불구하고 포장이란 단어의 쓰임새는 자주 부정적이다. 가식, 거짓, 겉치레 등을 지적하는 용도로, 우리는 포장이라는 말을 사용하곤 한다. ‘선의로 포장된 악의’라는 관용구를 들여다보자. ‘선의’라는 단어가 선한 캐릭터를 주로 맡는 배우를 상징한다면 ‘포장’은 악역 전문 배우다.

그럼에도 불구하고, 포장을 최초로 만든 사람의 따뜻한 마음은 변치 않고 이 행위 속에 담겨 있다. 일례로 조언이라는 게 그렇다. ‘선의’로 건네는 말이니 듣기에 조금 거슬리거나 아파도 받아들여야 한다고, 몸에 좋은 약이 입에 쓰다고들 말하지만 이건 순전히 조언을 하는 자의 편만을 드는 이야기다. 진심의 ‘선의’란 게 있다면, 자신의 의도를 이런저런 표현을 동원해 정성스레 ‘포장’해 전달할 수밖에 없을 테니 말이다.

주는 자가 받는 이를 오랫동안 세심히 지켜봐온 시간이 선물 받는 이의 만족도를 좌지우지하듯, 조언도 그렇다. 듣는 이의 성향과 아픈 곳을 헤아려 가장 고운 말이 되어 나올 때야 ‘조언’이지, 뱉어야 시원한 말은 조언이 아니다. 하물며 몸에 좋다는 쓴 약도 캡슐에 담아 삼키는 마당에, 말에도 그만한 정성은 들여야 할 것이다. 세상이 물건들로 이루어져 있다면 가장 무용할, 그러나 사람들로도 이루어져 있기에 제일 필요한 것. 그게 ‘포장’이 가진 철학이 아닐까. 

아프고 괴롭고 외로운 말들. 서러움과 서글픔은 내게 슬픔의 하위감정이다. 즉 슬픔이 집이라면 서러움과 서글픔은 그 안에 있는 작은 방 같은 거다. 슬프다는 말로 담을 수 있는 감정의 폭은 크다. 영상으로 치자면 넓은 프레임에 담기는 장면이다. ‘어감’이라는 것은 고유한 것이기보다는 그 단어를 사용하면서 얻어진 기억들이 쌓여 만들어진다. 

황금알을 낳는 오리 이야기가 있다. 이를테면 나는 황금알보다는 그걸 낳는 오리를 찾아 곁에 두는 사람인 셈이다. 스스로 가장 축복이라 여기는 취미 습관이다. 이런 식으로 좋아한 이후로 나는 좀처럼 무언가에 쉽게 질리지 않는다. 

그러나 고양이가 얼굴을 가까이 댈 때 얼굴에 닿는 수염의 감각도, 내가 좋아하는 돌돌 말린 종이 끝의 감각도, 배시시 웃음이 흘러나올 때를 표현하는 말도 결국 간지러움이니, 기괴하다. 그럼에도 내가 컨트롤이 가능할 때, 달리 말하자면 정도를 조절할 수 있을 때 간지러움은 행복함과 연결이 된다. 어느 정도의 칭찬은 기분이 좋지만 지나치다 싶으면 몸 둘 바를 모르게 되고, 잠깐의 촉감으로는 웃을 수 있지만 너무 오래 지속되면 고통스러워진다. 마치 불가사리가 아름다우려면 내게 어느 정도의 거리가 필요한 것처럼 말이다. 

기억은 틀릴 수가 있다. 이소라의 〈바람이 분다〉 중 ‘사랑은 다르게 적힌다’라는 가사는 기억의 속성을 잘 활용한, 거의 명언과 같은 표현이다. 반면에 추억은 틀릴 가능성이 없다. 이미 내가 어떻게 저장하기로 한, 나의 감정이 적극적으로 개입된 결과이기 때문이다. 그 당시 상황이 실제로 좋았든 나빴든, 추억이 되느냐 마느냐의 감독 권한은 전적으로 내게 있다. 뼈아픈 슬픔도 시간이 흘러 추억이 되기도 하는 것처럼 말이다.

추억이 인화되어 액자에 넣어진 사진이라면, 기억은 잘려져 나온 디지털 사진이다. 잘리기 전의 상태에 따라 전혀 다른 이야기가 되기도 하고, 확대해서 들여다보면 몰랐던 것들이 튀어나오기도 한다. 지나가긴 했지만 소멸되진 않았기에 앞으로 어떤 모습으로 바뀔지 아무도 모른다. 모든 기억이 익어 추억이 되진 못하지만, 모든 추억은 결국 기억의 흔적이다. 

중력이 내게 해주고픈 말을 받아들이면서 다만 너무 아프지 않게 나이 드는 것, 그러나 숫자로 모든 걸 판단하는 우를 범하지 않는 것, 육체의 유한함 앞에 겸허해지는 것, 이것이 앞으로의 내 나이에 관한 바람이다. 

이때 난 대한민국에 스타트업 법이 필요하다고 생각했다. 소규모 블랙 기업 대표들이 ‘구글’, ‘애플’, ‘넷플릭스’를 언급할 때마다 고 허무맹랑한 주둥이에 벌금을 먹이는 법 말이다. 용도가 결백하지 않을 땐 ‘크리에이티브’, ‘린’, ‘그릿’ 등의 단어도 금지해야만 옳았다. 그것들은 원래의 건강한 의미를 잃고, 스타트업 대표가 노예에게 산업혁명을 떠넘길 때나 쓰이게 된 지 오래였다.  

명예와 긍지를 중시하는 수진 언니, 아니 수잔 과장이 한숨을 푹 쉬었다. 나는 그가 진저리 치며 건넨 새 명함을 받아 들었다. ‘국제마인드뷰티콘텐츠그룹 디지털전략총괄기획팀 과장 수잔 이수진’이라는 글자들이 조금의 빈틈도 없이 서로를 다닥다닥 끌어안고 있었다. 이따위 명함을 가진 인간이라면 응당 무능하겠거니 선입견이 생기는 물건이었다.

요즘 나는 전생설을 밀고 있다. 그는 저번 생에 너무 착한 천사였거나 인류를 멸망에서 구한 천재였을 거라고, 보답으로 이번 생은 악마나 바보로 살 권리를 받은 거라고. 

어쩌면 이것은 내 조상이 박국제의 주둥이를 빌려 도망 신호를 보내온 걸지도 몰랐다. 하지만 나는 못 받아먹었다. 탄산처럼 싸한 촉을 무시한 대가는 너무나도 컸다. 후에 이 순간을 떠올릴 때마다 내가 왜 ISTJ가 아닌지, 어째서 그가 ENFP에게 더 큰 배신을 당하지 못했는지 가슴이 먹먹해지곤 했다. 

솔직히 나나 지구도 박국제와 겸상하고 싶은 기분은 아니었다. 하지만 세 명 다 빠지면 무언가 일이 생겼다는 티가 났다. 이럴 때 두 명만 나가 놈을 상대해 주는 것이 우리 사이의 ‘타격 품앗이’ 룰이었다. 그나마 상태가 괜찮은 두 명이 소란을 떨며 제일 충격받거나 화가 난 한 명의 침묵을 감춰 주는 것이었다. 

나는 무교지만 가끔씩은 하늘에 기도를 올렸다. 신이시여, 저 자식이 제발 입 좀 닥치게 해 주세요. 아니면 다이소에서 CEO용 입마개를 살 수 있게 해 주시던가요. 어떤 신도 답하지 않는 가운데 지루한 월, 화, 수, 목, 금 들이 반복되었다. 

이 또한 모든 신께 번갈아 빌고 또 빈 사항이었지만 한 번도 이뤄지지 않았다. 많이 빈 것에 비해 성과가 없는 걸 보니 신들의 세계에도 방관자 심리가 있어 ‘나 말고 쟤가 들어주겠지.’ 미루는 것만 같았다. 

─ 이거 봐. 쌀통 회사 문의 게시판인데, 원래부터 불친절로 유명한가 봐. 지구 너한테만 못되게 군 게 아니고 그냥 쌀통맨 인성이 그런 듯……?

─ 버릇없는 자식. 거의 할머니들이던데 왜 그러는 거지?

─ 제품 하자로 문의하면 열에 아홉한테는 그냥 쓰라면서 끊어 버린대.

─ 열에 하나한테는 친절하고?

─ 아니. 10퍼센트의 비율로는 더 막장 싸움이 나는 것 같아. 여기 보이지? 게시판에도 10건 중 1건 정도는 강성 고객이야. 

슬쩍 보니 어떤 글은 강성 고객 수준을 넘어서 있었다. 아마도 어르신일 유저가 쌀통맨을 두고 ‘ㅆㅣㅆ:팔세끼’라고 갈겨 쓴 부분이 특히 인상 깊었다. 그분은 자신이 칠십 평생 인터넷에 후기나 리뷰랄 것을 써 본 적이 없는데 이 회사 젊은 놈은 너무 싹퉁 바가지가 없어 참을 수가 없더라는 사견을 덧붙였다. 나는 첫째로 이런 회사가 여태 망하지 않은 것이 신기했고, 고객 센터 평균 만족도가 1.6임에도 응대가 개선되지 않는 것이 두 번째로 놀라웠다. 

<

AARRR 퍼널 분석 시리즈 몰아보기

AARRR (1): Acquisition 획득

AARRR (2): Activation 활성화

AARRR (3): Revenue 수익화

AARRR (4): Retention 리텐션

AARRR (5): Referral 추천

>

이번 포스트에서 다룰 것은 AARRR의 세 번째 단계, Revenue수익화다. 서비스의 모든 행동과 단계는 최종적으로 구매, 즉 '매출'에 기여해야 한다. Revenue 퍼널 분석을 통해 우리는 매출에 영향을 주는 주요 인자를 발굴하고, 매출이 비즈니스 건전성을 고려하며 발생하고 있는지 확인할 수 있다. <이 포스트의 내용 대다수는 패스트캠퍼스의 세계 3등에게 배우는 13개 데이터 분석 프로젝트 강의 기반으로 작성됐다.>

Revenue를 다루면서 우리가 얻고 싶은 질문과 답은 확고하다. 누가, 어떻게, 얼마나 우리 서비스를 사 주고 있는가. 지출하는 비용 대비 수익은 안정적인가. 그래서 우리 서비스는 성장하고 있는 것인가. 그래서 결과적으로, 매출을 올리기 위해 우리가 개선해야 하는 지표는 무엇이고 취해야 하는 액션은 무엇인가. 

우리가 기본적으로 수집할 수 있는 '매출액'이라는 지표로는 이에 대한 답을 내기 어렵다. 이번 포스트에서는 매출액이라는 지표를 조금 더 잘게 나눠서 유의미한 지표를 만들어 보고, 이를 통해 서비스를 개선할 액션 아이템을 도출하는 과정을 따라가 본다.

ARPU? ARPPU?

살펴보기에 앞서 비슷하게 생긴 두 용어를 정리하고 들어가자. 평균 매출 관련해서 사용하는 지표로 ARPU와 ARPPU가 있는데, 이 둘은 엄연히 다른 용어다.

ARPU는 Average Revenue Per User로 인당 평균 매출을 의미한다. 매출로 유저 수를 나누면 되는데(Revenue / User), 구매하지 않은 유저도 계산되기 때문에 사용자가 늘어날 때 매출이 어떤 속도로 증가할 지 가늠하기 좋다. 일반적으로 월을 기준으로 계산한다.

이와 다르게 ARPPU는 Average Revenue Per Paying User로 결제자 인당 평균 매출을 의미한다. ARPU와 다르게 ARPPU는 구매 유저만 대상으로 계산한다(Revenue / Paying User). 그래서 구매 유저의 객단가 흐름을 파악할 때 활용하기 좋은 수치다. 이 역시 일반적으로 월 기준으로 집계한다.

여러 지표로 구매 트렌드 파악하기

아래 표는 위버스의 Revenue 관련 지표다. 해당 표 기반으로 위버스의 상황을 분석해 보자.

일단 해당 기업의 MAU, 즉 월 활성 유저 수는 꾸준히 증가하고 있다. 기존 Activation 퍼널에서 다뤘듯이 MAU 하나만으로는 활성 유저가 왜 늘어났는지는 파악하기 힘들다. 활성 사용자는 신규 유저가 유입돼도 오르지만 복귀 유저가 돌아와도 오르니까. 

다음으로 두 번째 표를 보면 ARPPU는 떨어지고 있다. ARPPU는 (위에서 다뤘듯이) 결제자 인당 총 매출이다. MAU가 오르는데 ARPPU가 떨어지는 상황 역시 접근할 수 있는 상황이 하나가 아니다. 직접 기여 구매자 수가 감소했을 수도 있지만 구매 객단가가 감소했을 수도 있으니까.

세 번째 표인 매출까지 놓고 전체 지표를 취합해 보면 전반적인 상황이 그려진다. 활성 유저 수와 매출액은 증가하는 추센데 ARPPU가 감소하는 상황은 하나밖에 없다. ARPPU를 구하는 공식이 기억나는가. 맞다. Revenue / Paying User 다. Paying User의 증가폭보다 Revenue의 증가폭이 커야만 이 상황에서 ARPPU가 감소할 수 있다. 다시 말하면 전체 유저의 객단가가 줄었다. 그리고 일반적으로 복귀 유저의 활성화보다 신규 유저의 획득으로 인한 객단가 변화가 더 크다.

즉 지금 위버스의 상황은 다음과 같은 문장으로 정리될 수 있을 것이다. 'MAU 증가로 신규 고객 유입에 의한 구매는 증가됐고 매출 역시 상승했지만 객단가 하락으로 ARPPU 자체는 감소됨. 신규 고객들의 확보로 이후 매출 및 ARPPU 상승이 기대된다'.

이처럼 구매 트렌드를 분석할 때는 하나의 지표를 가지고 표면적으로 판단해선 안 된다. 여러 지표를 통해 통합적인 인사이트 도출이 됐을 때만 현상 분석이 가능하다.

LTV, Lifetime Value

Acquisition 퍼널에서 한 번 설명했던 LTVLifetime Value는 유저 평생 가치로 번역되는 지표로, 유저가 진입부터 이탈에 걸쳐 지불하는 비용의 총합이다. 위에서 다룬 ARPU와 ARPPU는 LTV 관점에서 기간이라는 축을 더해 세분한 것이라 볼 수 있다.

이쯤에서 LTV에 대한 설명을 조금 정정해야 할 것 같다. 기존에 설명할 때는 일정 기간으로 구간을 설정하고 LTV를 구했다. 이는 엄밀히 말하자면 틀린 계산법이다. LTV는 유저가 유입부터 이탈까지 전체 기간 동안 지불하는 가치다. 사용자가 유입하고 이탈하는 정확한 기간을 구하는 것은 어려운 문제다.

그래서 일반적으로 적용하는 게 일 년의 기간인데, 이건 초기 스타트업 같이 피봇팅이 잦은 업종에게는 지나치게 긴 시간이다. 서비스가 변하면 유저의 행동과 구매패턴 역시 변화하니까. 그래서 정확한 Lifetime과 LTV를 구하긴 어렵다. 계산을 위해서는 기간에 대한 기준이 필요하다. 그리고 기간 축을 추가한 LTV는 ARPU나 ARPPU와 비슷해지는 거고.

투자 회수 기간Payback period

그러면 그 중요한 '기간'은 어떻게 설정해야 할까. 이 때 LTV와 같이 보면 좋은 지표가 투자 회수 기간이다. 예를 들어 보자. 어떤 서비스의 LTV를 측정했더니 오십 만원이 나왔다. 근데 이 오십 만원은 오 년 후에 회수된다. 장기적으로 수익성이 있는 건 분명 맞지만, 투자 회수 기간이 지나치게 길다면 서비스 입장에서는 힘든 시기를 거쳐야 할 수 있고 그런 기간이 길어지다 보면 자본 문제로 서비스를 더 이상 지속되지 못 하는 시점이 닥칠 수도 있으니까.

그래서 LTV는 투자 회수 기간을 필히 고려해야 한다. 일반적으로 기준 투자 회수 기간은 'CAC를 회수하는 데 걸리는 시간'과 'LTV / CAC 비율이 3~5가 되는 시간' 사이에서 회사의 컨디션에 따라 잡는다. 그리고 이렇게 투자 회수 기간을 고려해 잡은 LTV를 ARPU와 ARPPU라고 보면 된다.

ㅡ ‘악마의 식물’이라고 이름 붙은 것치고는, 그저 성가신 식물에 가까웠다. 좀더 살펴보니 해외에서 모스바나가 악마의 식물로 불리는 건 식물 자체의 유해성보다는 모스바나에 입혀진 이미지 때문인 것 같았다. 모스바나는 더스트 시대 후기, 그리고 재건 직후의 빈곤한 시대에 가장 번성했던 우점종dominant species이었다. 당시에는 세계 어디에나 모스바나의 덩굴이 가득했을 것이다. 사람들은 과거의 불행한 기억, 혹은 겪어본 적도 없는 시대의 절망과 이 식물을 연관 짓는 것인지도 몰랐다. 



ㅡ 수십 년 전 멸망한 도시인데 어디서 이렇게 시체 썩는 냄새가 나는 것인지 궁금했다. 알고 보니 야생동물들이 들어왔다가 고철 사이에 발이 빠져 나가지 못하고 죽는다고 했다. 오염된 고철들과 사체들이 쌓인, 살아 있는 것들을 죽음으로 끌어들이는 황폐한 유령도시. 아영이 기억하는 해월의 풍경은 그랬다. 

ㅡ 모스바나가 더스트 시대에 특화되어 진화한 식물이라면 이상한 일은 아니었다. 그 시기에는 어떤 생물이든, 아득바득 살려고 애쓰는 것들만이 살아남았다. 스스로 만들어낸 양분은 물론이고 주위의 양분까지 모두 빼앗아야 겨우 생명을 유지할 수 있었다. 불쾌하다는 감상도 어디까지나 아영이 재건 이후의 세대이기에 가능한 것이었다. 



ㅡ “돔을 없애는 거야. 그냥 모두가 밖에서 살아가게 하는 거지. 불완전한 채로. 그럼 그게 진짜 대안인가? 물론 그렇지는 않겠지. 똑같은 문제가 다시 생길 거야. 그래도 아무것도 하지 않을 수는 없어. 뭔가를 해야 해. 현상 유지란 없어. 예정된 종말뿐이지. 말도 안 되는 일을 계속해서 벌이는 것 자체가 우리를 그나마 나은 곳으로 이동시키는 거야.” 



ㅡ 당신은 재건의 역사를 식물들의 관점에서 재구성해보겠다고 했습니다. 아직도 그 작업이 수행되지 않았다는 점이 놀라울 정도입니다. 인류는 그간 얼마나 인간 중심적인 역사만을 써온 것일까요. 식물 인지 편향은 동물로서의 인간이 가진 오래된 습성입니다. 우리는 동물을 과대평가하고 식물을 과소평가합니다. 동물들의 개별성에 비해 식물들의 집단적 고유성을 폄하합니다. 식물들의 삶에 가득한 경쟁과 분투를 보지 않습니다. 문질러 지운 듯 흐릿한 식물 풍경을 바라볼 뿐입니다. 우리는 피라미드형 생물관에 종속되어 있습니다. 식물과 미생물, 곤충들은 피라미드를 떠받치는 바닥일 뿐이고, 비인간 동물들이 그 위에 있고, 인간은 피라미드의 꼭대기에 있다고 생각합니다. 완전히 반대로 알고 있는 셈이지요. 인간을 비롯한 동물들은 식물이 없으면 살아갈 수 없지만, 식물들은 동물이 없어도 얼마든지 종의 번영을 추구할 수 있으니까요. 인간은 언제나 지구라는 생태에 잠시 초대된 손님에 불과했습니다. 그마저도 언제든 쫓겨날 수 있는 위태로운 지위였지요.



ㅡ 아영을 비롯한 식물팀 연구원들은 그동안 전시회 기획 담당자들에게 너무 많이 시달려서, 이제는 ‘전시회’라는 말만 들어도 등에 오스스 소름이 돋았다. 전시회 기획팀은 모스바나에 대한 특별 전시를 갑자기 준비하게 되었는데 자신들은 식물에 대해서는 아는 바가 거의 없다며, 더스트생태연구센터로 거의 매일 전화를 걸어 필요한 자료를 요청하고 설명을 부탁했다. 정작 전화를 거는 담당자는 원치 않은 일을 갑자기 떠맡게 된 팀 막내인 것 같아서 화를 낼 수도 없고, 본업에 도저히 집중할 수 없을 정도로 요청이 쏟아지고 있으니 기꺼운 마음으로 도울 수도 없어서 모두 괴로워했다. 막상 모스바나의 사진이 전시회의 메인인 것처럼 걸려 있는 것을 보니 괜히 감격스러운 마음도 들었다. 하지만 전시회 내용은 과학을 잘 고증하기보다는 낭만적으로 포장한 신비주의에 가깝다는 것을 떠올리자, 그 즉시 감동이 차갑게 식고 말았다. 담당자는 약간 민망해하며 ‘흥행을 위해서는 예술성이 가미되어야 하고, 너무 과학적이기만 해서는 곤란하다’라고 했지만, 그럴 거면 도대체 왜 그렇게 식물팀을 몇 달간 괴롭혀댄 건지 모를 일이었다. 



ㅡ “그런데 저 벽 디스플레이, 저건 거의 사기 아닌가? 모스바나만 잔뜩 있는 해월도 저렇게 보이진 않을 텐데.”

  “뭘 사기까지. 원래 예술에는 과장이 있게 마련이라고요. 바이오아트니 하는 게 다 그런 거 아니겠어요.”

  “하긴, 논문 사진도 예쁘게 보이라고 색색깔로 염색하는데.” 



ㅡ 그래도 덕분에 재미있는 이야기를 많이 들을 수 있었습니다. 특히 모스바나를 두고 그것이 자연의 선물인지 인간이 만들어낸 도구인지에 대한 논쟁이 벌어졌다는 것이 흥미로웠습니다. 어떻게 생각하는지 제게도 물었으니 답해드리자면, 제 의견은 당신의 견해와 일치합니다. 모스바나가 자연인지 인공인지를 묻는 것은 무의미한 일이라고요. 모스바나는 자연인 동시에 인공적인 것이지요. 모스바나를 이루는 구성 요소들은 모두 자연에서 왔고, 그것은 인위적인 개입에 의해 모스바나라는 총체가 되었으며, 다시 자연의 일부로 진입했습니다. 인간이 모스바나를 이용했다고 주장하는 사람들이 있지만, 반대로 모스바나가 인간을 이용했다고 볼 수도 있을 겁니다. 둘은 분리할 수 없고, 분리할 필요조차 없는 것입니다. 분명한 건 모스바나는 인간에게 적응하는 전략으로 그 종의 번영을 추구했고, 인간은 모스바나를 절실히 필요로 했다는 사실입니다. 모스바나와 인간은 일종의 공진화를 이룬 셈입니다. 



ㅡ “레이첼, 제가 아는 건 한 가지뿐이에요. 지수 씨도 당신을 결코 잊지 않았다는 거예요. 제가 어렸을 때, 지수 씨는 식물이 잘 짜인 기계라는 사실을 자신에게 알려준 사람에 대해 제게 말해주곤 했어요. 정원에서 허공에 흩어지던 푸른빛을 지켜보던 지수 씨를 보면서, 저는 그렇게 한 사람의 평생을 사로잡는 기억이 있다는 걸 처음 알았죠. 그때 정말로 무슨 일이 있었던 것인지, 당신의 마음이 실제로 전부 유도된 것인지는 잘 모르겠어요. 그 무엇도 지수 씨의 잘못을 해명해줄 수는 없어요. 어쨌든 저는 그렇게 생각해요. 마음도 감정도 물질적인 것이고, 시간의 물줄기를 맞다보면 그 표면이 점차 깎여나가지만, 그래도 마지막에는 어떤 핵심이 남잖아요. 그렇게 남은 건 정말로 당신이 가졌던 마음이라고요. 시간조차 그 마음을 지우지 못한 거예요.”

ㅡ 레이첼이 자기 몸을 완전히 분해하기로 결정했음을 전해왔을 때 아영은 놀라지 않았다. 이제 레이첼이 기억하는 사람들, 그리고 레이첼을 기억하는 사람들은 대부분 먼지가 되었다. 레이첼에게는 죽음마저도 일종의 실험이었다. 레이첼의 죽음에 대한 두려움은 서서히 기계로 변화하는 과정에서 흐르는 물처럼 그의 몸을 떠나갔을 것이다. 레이첼은 이제 비로소 자신이 원하는 종류의 평온을 찾게 될 것이라고, 아영은 생각했다. 

ㅡ 이제 아영은 이곳에 있었을 누군가의 안식처를 그려볼 수 있었다.

   해 지는 저녁, 하나둘 불을 밝히는 노란 창문과 우산처럼 드리운 식물들. 허공을 채우는 푸른빛의 먼지. 지구의 끝도 우주의 끝도 아닌, 단지 어느 숲속의 유리 온실. 그리고 그곳에서 밤이 깊도록 유리벽 사이를 오갔을 어떤 온기 어린 이야기들을. 

투명한 그물을 오르는 청년들이 있었어. 언제부터 있었는지 모르는 투명한 그물의 끝을 아는 사람은 아무도 없었지. 그물은 정말로 투명해서 아예 존재하지 않는 것처럼 보였거든. 청년들은 그물의 끝을 보는 것이 삶의 유일한 목표인 것처럼 매일이고 그물을 올랐어.

어느 날, 마을에 그물의 끝을 보았다는 사람이 나타났지. 그는 그물의 끝에 대한 여러 가지 재미있는 이야기를 들려주고 다녔어. 그리고 며칠 뒤에 그는 그냥 주정뱅이에, 허풍쟁이라는 것이 밝혀졌지. 그의 정체가 밝혀질 때 말이야, 청년들의 표정을 당신이 봤어야 해. 허풍쟁이에게 엄청나게 분노하면서도, 왠지 모르게 안도하는 그들의 표정을. 목표가 사라질까 봐 두려운 청년들의 미소를. 그물의 끝을 본 남자는 정말로 허풍쟁이였을까. 정말로, 정말로 주정뱅이였을까? (An invisible net, 노상호 中)

당연하게도 '제비'는 망했다. 월세를 못 내 일본인 건물주에게 쫒겨나 2년 만에. 이상은 그 뒤로도 카페 '학'과 다방 '69'를 열었지만 얼마 못 가 또 말아먹었다. 명동의 다방 '맥'은 설계 도중에 중도금 지불이 어려워 중단되었다. 명확한 준비도 없이 그는 카페나 다방을 경영하려고 했다. 도로를 가로질러 가면서 차에 치이지나 않으면 운이 좋다는 식이었다. 어쩌면 그는 애초부터 망하려 들었는지도 모른다. (이상과 현실, 이혜인 中)

HTML과 CSS는 이용자의 동작에 따른 변화를 일반적으로 화면에 반영할 수 없다. 그러나 어떤 요소 위에 커서를 올려 놓거나 뗐을 때처럼 자주 구현할 필요성이 있는 동작 일부는 가상 클래스나 요소의 형태로 제공하기도 한다. 이번 포스트에서는 가상 클래스와 요소에 대해 알아보고, 여러 선택자가 한 요소를 꾸며줄 때 우선순위를 표기하기 위해 사용되는 구체성의 정의에 대해 알아본다. <해당 포스트는 비전공자를 위한 HTML/CSS 강의 기반으로 작성됐다>

가상 클래스pseudo class

예를 들어, <p>가 있다고 가정하자. 이 <p>에 마우스 커서를 올렸을 때만 특정 스타일을 주려면 어떻게 해야 할까? 해당 동작을 위해 구현해야 할 부분은 다음과 같다. 

(1) 임의의 클래스 선택자를 선언해 특정 스타일 규칙을 만든다.

(2) <p> 요소에 커서가 올라가면 클래스를 집어넣는다.

(3) <p> 요소에서 커서가 빠지면 클래스를 삭제한다.

이런 형태의 기능은 HTML과 CSS에서는 만들어 내기 어렵다. 2, 3번은 동적으로 변화돼야 하는 부분인데, 두 언어는 정적인 언어이기 때문에 이런 부분을 구현할 수 없기 때문이다. 그래서 CSS에서는 흔하게 사용되는 여러 패턴에 대해 미리 정의해 놓고 이를 가상 클래스 형태로 제어할 수 있게 했다.

:pseudo-class {
    property: value;
}

가상 클래스의 기본형은 위와 같다. 가상 클래스를 이용하면, 다른 언어를 끌어오지 않고도 CSS 내에서 동적인 기능을 처리 가능하므로 훨씬 효율적이다. 아래부터는, 기본적인 가상 클래스의 유형에 대해 다룬다.

문서 구조와 관련된 가상 클래스

first-child : 첫 번째 자식 요소 선택.
last-child : 마지막 자식 요소 선택.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

li:first-child { color: red; }
li:last-child { color: blue; }

해당 코드를 사용하면 처음 <li>와 마지막 <li>에 각각 색상이 적용된다. 즉, 가상 선택자로 위와 같이 구현한 코드는 아래 코드처럼 가상 선택자 없이 구현될 수도 있다.

<ul>
    <li class="first-child">HTML</li>
    <li>CSS</li>
    <li class="last-child">JS</li>
</ul>

앵커 요소와 관련된 가상 클래스

:link : 하이퍼 링크이면서 아직 방문하지 않은 앵커.
:visited : 이미 방문한 하이퍼링크를 의미.

a:link { color: blue; }
a:visited { color: gray; }

사용자 동작과 관련한 가상 클래스

이것들도 주로 <a>에 많이 쓰인다. 다만 앵커 관련 클래스와 달리 조건만 맞으면 다른 요소에도 사용 가능하다.

focus: 현재 입력 초점을 가진 요소에 적용
hover: 마우스 포인터가 있는 요소에 적용
active: 사용자 입력으로 활성화된 요소에 적용

a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }

가상 요소 pseudo element

::pseudo-element {
    property: value;
}

가상 클래스처럼 문서 내에 보이지 않지만 미리 정의한 위치에 삽입되도록 약속되어 있는 것으로, 가상 요소가 있다. 가상 요소를 사용하면 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수 있다. 기본적으로 가상 클래스와 동일하게 콜론으로 선언했으나, CSS3부터는 가상 클래스와의 구분을 위해 ::(더블 콜론) 기호를 사용하게 개편됐다. 다만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있을 수 있고 이 때는 ; 기호를 사용해야 한다.

before : 가장 앞에 요소를 삽입.
after : 가장 뒤에 요소를 삽입.
first-line : 요소의 첫 번째 줄에 있는 텍스트.
first-letter : 블록 레벨 요소의 첫 번째 문자.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

p::before { content: "###" }
p::after { content: "!!!" }
p::first-line { ... }
p::first-letter { ... }

before와 after 가상 요소는 애초에 내용이 없는 상태로 생성되기 때문에 내용을 넣기 위해서는 content 속성을 이용해야 한다. 눈에 보이지 않는 요소를 구체화해 보면 다음과 같다.

<p>
    <first-letter>L</first-letter>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
    <!-- 모니터 가로 해상도에 따라 요소가 포함하는 내용이 변동됩니다. -->
    <first-line>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiu ..(..어딘가쯤..) </first-line>... unt ut labore et dolore magna aliqua.
</p>

선언의 구체성

h1 { color: red; }
body h1 { color: green; }

요소를 선택하는 데는 여러 방법이 있다. 따라서 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있다. 위 코드에서, 두 규칙은 모두 <h1>을 지정하지만 두 규칙이 지정하는 스타일은 서로 다르다. 이럴 때 <h1>은 어떻게 표현될까.

선택자에는 어떤 규칙이 우선으로 적용돼야 하는지에 대해 정해진 규칙이 있다. 이 규칙을 '구체성'이라고 한다. 구체성은 선택자를 얼마나 명시적으로 선언했느냐를 수치화한 것으로, 구체성의 값이 클 수록 우선으로 적용된다.

0, 0, 0, 0

구체성은 위와 같이 네 개의 숫자 값으로 이뤄져 있다. 값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클 수록 높은 구체성을 갖는다. 구체성은 아래의 규칙대로 계산된다. 

 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소

 0, 0, 0, 0 : 전체 선택자

h1 { ... }  /* 0,0,0,1 */
body h1 { ... }  /* 0,0,0,2 */
.grape { ... }  /* 0,0,1,0 */
*.bright { ... }  /* 0,0,1,0 */
p.bright em.dark { ... }  /* 0,0,2,2 */
#page { ... }  /* 0,1,0,0 */
div#page { ... }  /* 0,1,0,1 */

인라인 스타일

p#page { color: red; }

<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

위 두 스타일 선언문을 보자. 전자는 0, 1, 0, 1의 구체성을 가지는 선택자로 스타일을 선언한 것이고 두 번째는 요소에 직접 인라인 스타일 방식으로 선언한 것이다. 둘 중 무엇이 우선순위로 적용될까? 정답은 후자다. 인라인 스타일의 구체성 값은 1, 0, 0, 0이며 규칙들 중 가장 큰 구체성을 갖는다. 
 

규칙에 우선권 적용하기, important

p#page { color: red !important; }

<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

important 키워드는 별도의 구체성 값은 없지만 모든 구체성을 무시하고 우선권을 갖는다. 속성값 뒤에 한 칸 공백을 주고 느낌표 기호와 함께 쓰면 important를 적용할 수 있다. 위의 <p>에는 important로 인해 color: red가 적용된다.
 

속성의 상속

h1 { color: gray; }

<h1>Hello, <em>CSS</em></h1>

위 코드에서 <em>은 부모인 <h1>의 color: grey를 상속받는다. 다만, 모든 부모의 속성이 자식에게 상속되는 건 아니다. 상식적으로 구분될 만한 속성 외, margin/ padding/ background/ border 등은 상속되지 않는다.

상속 속성의 구체성

* { color: red; }
h1#page { color: gray; }

<h1 id="page">Hello, <em>CSS</em></h1>

위 코드에서, <em>에는 color: red가 적용된다. 상속된 속성은 구체성을 가지지 못 하는 점을 기억하자.

겨울은 향으로 온다. 바람이 면에서 선으로 불기 시작할 때 겨울은 감지된다. 길고, 얇고, 뾰족해 콧속에서 와르르 산산조각이 나는 겨울바람에서는 차가운 결말과 냉랭한 시작의 냄새가 난다. 붙잡지 못한 시간이 우박처럼 쏟아지는 계절. 시간이 눈처럼 따뜻할 일은 없다. 나는 빨개진 코끝을 만지며 걷는다. 머리 위로 떨어지는 얼음이 뼈와 살과 근육을 다 통과해 버린 것 같다. 젖은 발밑을 바라볼 때마다 눈 위로 흐른 얼음물이 코끝으로 툭 떨어진다. 나는 그 어느 겨울에도 그 어떤 시간도 다 녹이지 못하고 서성거린다. (p.13, 새겨울 中)





오래 전, 좁은 주택 1층에 사는 나의 가족이 모처럼 외식을 나가는 겨울날. 일곱 살의 나는 선물 받은 풍선에 잔뜩 들떠 있다. 보라색과 푸른색과 검은색이 경계 없이 섞여 있고 별이 온통 흩뿌려져 있는 우주 풍선. 크고, 두껍고, 아름답다. (...) 나는 신이 나서 풍선을 들고 가장 먼저 집 앞으로 뛰어나간다. (...) 우주 풍선이 우주로 날아갔으면 좋겠다고 생각한다. 가는 길에 나도 데려갔으면 좋겠다고 생각한다. 가는 길에 나도 데려갔으면 좋겠다고 생각한다. 우주는 어떨까? 겨울만큼 추울까? 방심한 찰나 풍선을 놓치고, 손에서 미끄러진 풍선은 순식간에 울퉁불퉁한 바닥에 닿아 펑, 하고 터진다. 나는 커다래진 눈으로 그 자리를 바라본다. 아직 출발도 안 했는데. 계속 들고 가려고 했는데. 예쁜 풍선이었는데. 뒤늦게 나온 가족들은 혀를 찬다. 잘 좀 들고 있지. 길에는 볼품없이 찢어진 풍선의 흔적이 나뒹군다. 나는 망연자실해한다.

이것이 내가 기억하는 가장 오래된 겨울이다.

또한 이것이 내가 기억하는 거의 모든 겨울이다. 풍선은 모습을 바꾸며 터져나갔다. 두 팔로 끌어안아도, 온몸으로 보호해도, 경계를 늦추지 않아도 풍선은 여지없이 잔해가 됐다. 바라고 꿈꾼 많은 것이 그렇게 흩어졌다. 원래 사는 게 다 그렇다는 건 익히 들어 알고 있었다. 알고 있었지만, 아직은 그 사실을 받아들일 수 있을 만큼 충분히 울지 못했던 때가 있었다. 매번 슬펐고 매번 울었다. 몸부림칠 수 있고 슬퍼할 수 있었던 것은 젊음의 특권이었을지도 모른다.

그럼에도 겨울을 좋아하는 건 어쩌면 모순된 성정이다. 이런 겨울들을 통과해오면서도 나는 한 번도 겨울을 배신한 적이 없었다. 겨울이 나를 배신한 적이 없듯이. (p.15, 새겨울 中)





'과년'이라는 말이 얼마나 나에게 어울리지 않는 말이 되었는지 종종 생각한다. 지날 과, 해 년. '주로 여자의 나이가 보통 혼인할 시기를 지난 상태에 있음.' 나이로만 따진다면 결혼 적령기에 속해 있지만 결혼할 시기를 기준으로 삶을 재단할 생각은 없다. 결혼하고 애를 낳지 않는다고 여성으로서의 책무를 다하지 않는 이기적인 인간으로 취급당할 생각도 없다. 옛날에야 취업과 결혼, 출산이 어른이 되는 하나의 의례였지만 이 시대의 어른에게는 그것 말고도 할 일이 너무 많으니까. 방황도 해야 하고 저항도 해야 하고 살 길도 찾아야 한다. 원래 시대의 참인재란 바쁜 것이다. (p.23, 1991 中)

내가 태어난 해는 1991년이다. 하나에서 아홉까지 수를 세고, 다시 아홉부터 하나까지 수를 세어본다. 내 마음대로 의미를 배정해본다. 하나, 탄생, 둘, 있었던 일, 셋, 있어야만 했던 일, 넷, 있을 수 있었던 일, 다섯, 결심, 여섯, 없기를 바랐던 일, 일곱, 없어야만 했던 일, 여덟, 없었던 일, 아홉, 소멸. 내가 배정한 진자 운동은 앞뒤를 오가며 착실히 자신의 일을 수행한다. 그 일이난 나를 매번 출발선에 세우는 것이다. 매번 아쉬워하며 돌아올 것을 알면서도 또 한 번 진자를 밀어붙이는 습성은 1991이라는 숫자가 건 마법 같은 게 아닐까 생각하게 된다. 일을 벌여놓고 끝까지 달려갔다가 울며 돌아오기를 여러 번이다. (p.23, 1991 中)





바라건대 진심으로 경청하는 사람들의 세계에서 살고 싶다. 판단을 잠시 멈추는 사람들의 세계, 상대방의 삶에 자신의 상을 욱여넣으려고 들지 않는 사람들의 세계, 복잡함을 인정하는 사람들의 세계. 세 줄 요약만 듣고 홀연히 사라지지 않는 이들의 장황한 말을 듣고 싶다. 한 명 한 명의 이야기가 물화되지 않는 소중한 순간을 목격하고 싶다. 물론 자본주의 사회에서 시간은 곧 돈이므로 우리는 고전 다이제스트와 '결말 포함 줄거리'와 '후렴구 모음'의 존재를 인정해야 한다. 그러나 하다못해 친구의 말조차 세 시간 이상 듣는 일이 적은 세상에서 그나마 우리 자신을 톱니바퀴로만 두지 않을 수 있는 몇 가지 방법이 있다면 그중 하나는 반드시 예술 경험일 것이다.

책 300페이지를 읽는 일. 40분짜리 피아노 협주곡을 듣는 일. 두 시간짜리 영화를 보는 일. 미술관 내부를 아주 천천히 걷는 일. 그러는 동안 나의 편견과 아집을 내려놓고 마음을 활짝 열어두는 일. 그럴 때 왠지 인류의 일원이 되었다고 느낀다. 표현하고 경청해온 사람들이 커뮤니티에 한 발짝씩 다가선다고 느낀다. 이 바쁜 세상에서 시간을 견디는 인내심이란 진화에 불리한 성정일지도 모르지만, 그럼에도, 그 인내심이 없다면 내가 꿈꾸는 다정한 사람들의 세계는 그 꿈의 흔적조차 파르르하게 사라질까 두렵다. (p.51, 이상적인 경청의 세계 中)





언젠가 그에게 보내는 편지에 사진의 운문성에 대해 썼다. 사진은 시 같고, 영화는 소설 같아요. 저는 사실 시를 잘 모르겠어요. 시를 잘 모르겠는데 사진은 재미있어요. 구체적인 내용은 기억나지 않지만 대략 그런 내용이었던 것 같다. 친우는 내가 사진과 시의 혈연 관계를 파악하고 있다는 점에 즐거움을 보였다. 그것은 사진과 시로 세상의 일부분을 포착해온 사람의 우애 같은 것이었을까. 그는 순간적인 이미지로 세상을 감각하는 데에 익숙하다고 했다. 어쩌면 정말 중요한 것들은 인과의 세계 밖에 있을지도 모른다고 그는 편지에 썼다. 우리에게 인과가 중요치 않다면, 우리는 서로의 불완전한 여러 모습을 기어코 연결하여 하나의 진실로 만들려 들지 않을 수 있을까. 사진에 박제된 단면에게 삶의 진실을 담보하는 부담을 안기지 않을 수 있을까. 타인에게 나를 낱낱이 이해해달라고 요구하지 않을 수 있을까. 그 어떤 것도 기워내거나 요청하지 않는 채로, 사건과 감정들을 있는 그대로 통과해보낼 수 있을까. 판단을 멈추고 잠시간 세상을 고요히 둘 수 있을까. 이것은 일종의 결벽일까. (p.59, 포착하기 中)





책들 사이에서 왜 방황하는가? 왜 어떤 책을 집어 들다 말고 다른 책의 유혹에 넘어가는가? 그것이 책이기 때문이다. '지금 이곳의 나'가 아닌 모든 것이 책에 있기 때문이다. 그래서 나는 이런 사람이 될지 저런 사람이 될지 이런 세계에 방문할지 저런 삶에 틈입당해볼지를 고민하고 고민하며 하루의 1/48 가량을 기꺼이 쓴다. 그중 어떤 책도 한 권으로 완벽하지 않기 때문에, 한 권이 다른 모든 책을 장악하는 일 같은 건 일어나지 않기 때문에, 그것이 책이기 때문에 나는 기꺼이 불완전한 상상의 파편들 중 하나를 최선을 다해 고른다. (p.77, 완벽한 삶-책 中)







아침 식사 시간은 그 누구에게도 양보할 수 없는 충만의 시간이다. 과일이며 빵이며 하는 간단한 것들을 준비해 책상에 앉는다. 독서대에 끼워놓은 잡지를 책상 위에 올린다. 한 입씩 천천히 먹으며 새로운 것들을 머릿속에 넣는다. 과학 잡지일 때도 있고 철학 잡지일 때도 페미니즘 잡지일 때도 책에 대한 잡지일 때도 있다. 이번 호의 주제는 죽음이다. 천천히 먹는다. 음식도 글도 차근차근 머릿속에 넣는다. 아침 바람이 깨운 정신에는 글이 잘도 들어간다. 밤새 굶주리고 허기졌던 몸과 정신이 새로운 것으로 가득 찬다. 익숙하고 지겨운 생각이 신나게 박살 난다. 나는 몇 개의 구절을 두세 번 되뇌며 빼먹은 재료 같은 것을 찬장에서 꺼내 온다. "사랑을 두려워하는 것은 삶을 두려워하는 것이고, 삶을 두려워하는 사람은 이미 거의 죽은 상태다." 근사한 철학자들의 문장을 오물오물 씹어본다. 나는 거의 죽어 있나?

아직은 완전히 죽지 않았으므로 매일 아침 '작은 죽음'에서 깨어나는 일을 축하할 수 있다. 무사히 깨어났고 깨어난 것에 비탄을 느끼지 않았으므로 이것은 성공적인 부활이다. 아침에 눈을 뜨는 일이 비탄스럽게 느껴지는 경험에 대해 잘 알고 있다. 아침을 사랑하게 된 것은 기적이라고 말해도 좋다. (p.97, 4000주 中)





기차의 여정은 정확히 끝나기에 달콤하다. 우리는 이 기차가 변수 없이 목표지를 향해 가고 있다는 것을 안다. 평소에 어깨 위로 떨어지던 불빛을 마치 아름다운 별인 것처럼 볼 수도 있다. 우리에게도 목표지가 정해져 있다면, 끝나는 시간이 정확하게 정해져 있다면, 곁의 소란과 고통이 먼 메아리처럼만 존재한다면 이렇게 힘들지 않을 수 있을까. 하지만 우리는 안다. 목표지도 시간도 정해져 있다면 그것은 더 이상 삶이 아니라는 것을. 나의 고통이 나에게서 유리되어 존재한다면 그것은 더더욱 삶이 아니라는 것을. (...)

그저 그때의 나에게는 모든 것이 혼란스러웠는데, 시간이 흐른 지금도 조금도 나아지지 않은 것만 같다. 그날 창에 비치던 나의 얼굴이 기억난다. 파리한 얼굴로 매일의 불안을 기록하던 스물두 살의 얼굴. 흔들리는 동공. 무사히 도착한 그날처럼, 시간이 흐르면 무엇인가는 결정되리라고 믿었던 것 같다. 손바닥으로 기차의 창문을 쓸어본다. 안개 같은 사람의 얼굴이 있다. 목적지에 도착한 기차에는 이제 나의 자리가 없다. 여전히 떠나야 한다. (p.103, 밤 기차 中)

남자와 선미는 포장마차를 나와 어느새 대낮처럼 훤해진 거리를 걸었다. 함께 걷기에도, 모른 척하기에도 어색해서 다친 사람이 걱정된다는 말과, 그래도 부인의 반응을 보면 큰일은 아닐 거라는 말을 주고받았다. 마지막 대화는 역시 김밥 맛에 관한 것이었다. 남자는 버릇처럼 "제대로죠, 아주 제대로예요" 라고 했고 선미는 이번에는 그것이 기름을 바르거나 바르지 않은 것, 썰거나 혹은 전혀 썰지 않은 그 모든 것을 가리킨다는 사실을 알았다. (p.50, 그의 에그머핀 2분의 1 中)

지하철은 한참이나 들어오지 않고 선배는 꾸벅꾸벅 졸기 시작했다. 나는 지하철을 탈 때마다 문득문득 하는 생각, 대체 지하철의 이 빈 공간들이 어떻게 지상의 압력을 견디는가 하는 생각을 했다. 그런데 그것은 사실 빈 공간이 견디는 것이 아니라 지상이 빈 공간을 견디는 것이기도 했다. 그리고 그렇게 서로 견디고 있어야 이 도시라는 일상의 세계가 유지되는 것이고. (p.77, 우리가 헤이, 라고 부를 때 中)

다음 학기 예정자까지 확인해보았지만 거기에 류의 이름은 없었다. 그제야 나는 내가 어제 만난 사람이 누구나 한마디씩 하던 류가 아니라 나만 알 수 있는 류였을지도 모른다는 생각을 했다. 실패한 농담이 상대에게 주었을 모욕에 대해 밤길을 걸으며 사과하고 싶어 하던 사람, 다른 어떤 말보다 사람을 보고 온다, 라는 말을 수면 위의 파문처럼 마음을 울려 받아들이던 사람. (p.91, 류, 내가 아는 사람 中)

의자를 가져와서 은지는 맞은편에 놓았다. 자기와 당연히 마주 볼 수 있게 놓았다. 의자에는 아무 것도 없었지만 그래서 의자는 ㅢ자가 되었지만 그래도 비어 있으니 올 수 있었다. 남수가 올 수 있었고 남수만 온다면 택시를 타고 집으로 갈 수 있었다. 남수는 이 도시를 떠돌고 있고 돌아오지 않고 싶을 수도 있지만 은지는 비워놓았다. 자기만은 그 비워둠을 양해하고 싶었다. 그런 양해라면 누구의 눈치도 보지 않고 어떠한 보류도 없이 기꺼이 취급할 수 있는 것이었다. (p.103, 17/24 中)

차창이 열리더니 영건이가 손을 흔들었고 동기들은 야, 너 절대 돌아오면 안 된다, 그냥 공항으로 죽 직진하는 거야, 라고 소리를 질렀다. 영건이가 걱정하지 말라고 외치는 사이 바람이 불면서 모자가 홱 날아가버렸는데, 그걸 모르고 출발한 차는 잠시 유턴 차로에 서는가 싶더니 그냥 달려 내가 예약해준 곳, 섬을 찾는 사람들 수만큼 신이 있어서 모두를 품어 준다는 인도네시아의 그 섬으로 곧장 달려갔다. (p.129, 영건이가 온다 中)

선택자는 CSS에서 스타일을 입힐 HTML 등 마크업 언어의 요소를 선택하는 문자를 뜻한다. 대부분의 CSS 코드는 A { (B): (C); } 형태로 이뤄져 있는데, 스타일을 나열한 중괄호 앞 부분에 오는 A 부분이 바로 선택자다. 이번 포스트는 선택자의 유형과 조합에 대해 알아보고, 선택자와 문서의 관계 기준으로 문서 구조를 이해해 본다. <해당 포스트는 비전공자를 위한 HTML/CSS 강의 기반으로 작성됐다>

요소 선택자

h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }
h4 { color: yellow; }
h5 { color: yellow; }
h6 { color: yellow; }

선택자 중 가장 기본이 되는 선택자로, 선택자 부분에 태그 이름이 들어가는 점을 따서 태그 선택자라고도 한다. 요소 선택자를 사용하면 문서 내 선택자에 해당하는 모든 요소에 스타일 규칙이 적용된다.

그룹화

h1, h2, h3, h4, h5, h6 { color: yellow; }
* { color: yellow; }

선택자는 기본적으로 쉼표를 이용해서 그룹화할 수 있고, asterisk 기호(*)로 문서 내의 모든 요소를 선택할 수도 있다. 

h1 { color: yellow; font-size: 2em; background-color: gray; }
h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }

 선택자 뿐 아니라 선언도 그룹화 가능하다. 물론 선택자와 선언을 동시에 그룹화할 수도 있다.

요소 선택자의 한계

아래와 같은 코드가 있다고 가정하자.

<dl>
    <dt>HTML</dt>
    <dd><span>HTML</span>은 문서의 구조를 나타냅니다.</dd>
    <dt>CSS</dt>
    <dd><span>CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>

당신은 해당 HTML 문서의 "HTML" 부분에는 보라색 글자를 지정하고, "CSS" 부분에는 밑줄을 선언하고 싶다. 하지만 요소 선택자로는 동일한 이름으로 묶여 있는 요소를 각각 선택해서 규칙을 적용하기는 불가능하다. <dt>에 보라색을 지정하면 "CSS"도 보라색으로 변할 것이고, 반대로 <dt>에 밑줄을 그으면 "HTML"에도 동일하게 밑줄이 그어질 것이다. 당신이 원하는 방식대로 문맥마다 스타일을 각각 적용할 방법은 없을까? 

class 선택자

.foo { font-size: 30px; }

<p class="foo"> ... </p>

요소에 구애받지 않고 스타일 규칙을 적용시키는 가장 일반적인 방법은 class 선택자를 활용하는 것이다. HTML에서 동일한 스타일을 적용받을 class명을 적어 놓고 CSS에서 적용할 규칙을 써 놓으면 동일한 class명을 가진 모든 요소에 동일한 스타일 규칙이 적용된다. 그럼 class 선택자를 이용해 요소 선택자로 구현해내지 못 했던 부분을 구현해 보자.

.html { color: purple; }
.css { text-decoration: underline; }

<dl>
    <dt class="html">HTML</dt>
    <dd><span class="html">HTML</span>은 문서의 구조를 나타냅니다.</dd>
    <dt class="css">CSS</dt>
    <dd><span class="css">CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>

이때, 한 요소는 class 속성을 동시에 여러 개 가질 수 있다. 공백으로 구분해 여러 개의 class 값을 넣어 주면 된다. 

.foo { font-size: 30px; }
.bar { color: blue; }

<p class="foo bar"> ... </p>

위 HTML문의 <p> 안에는 "foo"와 "bar"라는 두 개의 class가 선언돼 있다. CSS문에는 또 foo class가 30px의 폰트 크기를 갖게, bar class는 글자를 파란색으로 적용하도록 설정돼 있다. 위 코드를 실행하면, <p>에 foo, bar 둘 모두의 규칙이 적용되고 있다는 것을 알 수 있다.

id 선택자

#bar { background-color: yellow; }

<p id="bar"> ... </p>

id 선택자는 class 선택자와 거의 유사하다. 다만 .(마침표) 대신 #(해시) 기호를 쓴다는 점과, 요소에 class 속성 대신 id 속성을 사용한다는 점이 다르다. 또, 여러 요소에 중복 선언될 수 있는 class와 다르게 id는 문서 내에서 단 한 번만 쓰일 수 있다. 
 

선택자의 조합

/* 요소와 class의 조합 */
p.bar { ... }

/* 다중 class */
.foo.bar { ... }

/* id와 class의 조합 */
#foo.bar { ... }

위 예제와 같이, 여러 선택자를 조합해 사용할 수도 있다.

속성 선택자

p[class] { color: silver; }
p[class][id] { text-decoration: underline; }

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

속성 선택자는 타 선택자와 달리 대괄호를 이용해 묶고 대괄호 안에 속성 이름이 들어가는 선택자다. 요소에 해당 이름의 속성이 있다면 적용된다.

정확한 속성값으로 선택

<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

class, id값 존재 자체로 두루뭉술 묶을 수도 있지만 이처럼 명확한 속성을 지정해 줄 수도 있다. 이처럼 속성 선택자에 속성값까지 지정해 주면 동일한 속성에 동일한 속성값을 가진 부분에만 스타일이 적용된다.

 

부분 속성값으로 선택

<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>

p[class~="color"] { font-style: italic; }
p[class^="color"] { font-style: italic; }
p[class$="color"] { font-style: italic; }
p[class*="color"] { font-style: italic; }

[class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택.
[class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택.
[class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택.
[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택.

p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */

문서 구조의 이해

<html>
<body>
    <div>
        <h1><span>HTML</span>: Hyper Text Markup Language</h1>
    </div>
    <p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>

선택자와 문서의 관계를 이해하기 위해 먼저 어떻게 문서가 구조화되는지 살펴보자. 이들의 관계는 부모와 자식, 조상과 자손, 그리고 형제 관계로 분류될 수 있다.

부모와 자식 관계

부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 한 요소의 부모 요소는 하나뿐이다. 자식 요소는 부모 요소의 반대라고 생각하면 된다. 다만 한 요소의 부모 요소는 한 개만 존재할 수 있는 반면 한 부모 아래의 자식 요소는 여러 개 존재할 수 있다.

<body>의 부모 요소 : <html> ↔ <html>의 자식 요소 : <body>
<div>의 부모 요소 : <body> ↔ <body>의 자식 요소 : <div>, <p>
<h1>의 부모 요소 : <div> ↔ <div>의 자식 요소 : <h1>
<span>의 부모 요소 : <h1> ↔ <h1>의 자식 요소 : <span> 
<p>의 부모 요소 : <body> ↔ <body>의 자식 요소 : <div>, <p>
 

조상과 자손 관계

조상과 자손의 관계 여러 부모 자식 관계를 포함해 확장한 관계라고 보면 된다. 조상 요소는 한 요소를 포함하는 (부모 요소를 포함한) 모든 요소고, 자손 요소는 반대로 그 요소가 포함하고 있는 모든 요소다.

<body>의 조상 요소 : <html> ↔ <html>의 자손 요소 : <body>, <div>, <h1>, <span>, <p>
<div>의 조상 요소 : <html>, <body> ↔ <body>의 자손 요소 : <div>, <h1>, <span>, <p>
<h1>의 조상 요소 : <html>, <body>, <div> ↔ <div>의 자손 요소 : <h1>, <span>
<span>의 조상 요소 : <html>, <body>, <div>, <h1> ↔ <h1>의 자손 요소 : <span>
<p>의 조상 요소 : <html>, <body> ↔ <body>의 자손 요소 : <div>, <h1>, <span>, <p>

형제 관계

서로 같은 부모를 가지고 있는 요소 사이의 관계를 형제 관계라고 한다. 위 코드 중 <div>, <p>가 형제 관계다. 형제 관계 중 바로 뒤에 있는 요소를 지칭할 경우는 인접한 관계를 가진다, 혹은 인접한다고 부른다. 위 코드에서는 <p>가 <div>에 인접한 형제 요소가 된다.  

문서 구조 관련 선택자

문서 구조를 이용한 선택자로 자손 선택자, 자식 선택자, 인접 선택자가 있다.

 

자손 선택자

div span { color: red; }

자손 선택자는 선택자 사이에 아무 기호 없이 공백으로 구분한다. 이 선택자는 <div>의 자손 요소인 <span>을 선택하는 선택자다.
 

자식 선택자

div > h1 { color: red; }

자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣는다. 이 선택자는 <div>의 자식 요소인 <h1>을 선택하는 선택자다. 

인접 형제 선택자

div + p { color: red; }

인접 형제 선택자는 선택자 사이에 +를 넣어 표현한다. 

CSS는 마크업 언어, 즉 HTML을 꾸며 주는 표현용 언어다. HTML이 문저의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인한다. CSS는 HTML과는 독립된 다른 언어이지만 표현을 하기 위한 언어이기 때문에 마크업 문서 자체가 존재하지 않다면 무용지물이 된다. 때문에, 보통 CSS는 HTML과 묶어 얘기한다.

전 세계의 많은 웹 사이트들은 전부 HTML 태그를 이용해 만들어진다. 하지만 웹 사이트를 구축하는 데 자주 사용하는 HTML의 개수는 십여 개밖에 되지 않는다. 이 모든 사이트를 각각 다양하고 독창적인 디자인으로 표현될 수 있게 해 주는 게 CSS다. 이번 포스트에서는 기본적인 CSS 문법에 대해 알아본다. <해당 포스트는 비전공자를 위한 HTML/CSS 강의 기반으로 작성됐다>

CSS 구문

h1 { color: yellow; font-size:2em; }

선택자selector : "h1"

속성property : "color"

값value : "yellow"

선언declaration : "color: yellow", "font-size: 2em"

선언부declaration block : "{ color: yellow; font-size:2em; }"

규칙rule set : "h1 { color: yellow; font-size:2em; }"

CSS 파일은 여러 개의 규칙으로 이루어져 있다. 구문을 작성할 때는 개행에 주의해야 하는데, 선택자와 선언부 사이나 선언과 선언 사이는 개행 해도 상관 없으나 속성이름과 속성값 사이에는 개행해선 안 된다.
 

/* 올바른 예 */

h1
{ color: yellow; font-size:2em; }

h1 {
    color: yellow;
    font-size:2em;
}

/* 잘못된 예 */

h1 {
    color:
    yellow;
}

 

CSS와 마크업 문서 연결 방법

(1) 인라인Inline 방식

<div style="color:red;"> 내용 </div>

인라인 방식은 해당 요소에 직접 스타일 속성을 사용해서 규칙들을 선언하는 방법을 뜻한다. 해당 요소에 직접 입력하기 때문에 선택자는 필요 없고, 선언부에 내용만 스타일 속성의 값으로 넣어 주면 된다. 인라인 방식은 코드의 재활용이 되지 않기 때문에 자주 사용하지는 않는다.

(2) 인터널Internal 방식

<style> div {color: red;} </style>

인터널 방식은 <head>에 <style> 태그를 활용해 문서마다 스타일을 선언해 주는 방법이다. 이 방식을 활용하면 문서 내의 모든 <div>에 같은 스타일을 줄 수 있다. 다만, 많은 페이지가 있을 경우 까다로운 건 매한가지다.
 

(3) 익스터널External 방식

div {color: red;}

익스터널 방식은 외부 스타일 시트 파일을 이용하는 방법이다. 한 개 문서를 만들어 거기에 전체 문서가 공용으로 사용할 스타일 규칙을 만들어 넣고, .css 확장자로 저장한 후 페이지마다 링크로 CSS 파일을 연결해 주면 된다.

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

이렇게 <head> 내부에 <link>를 선언한 후 href 속성을 이용해 경로를 적어주면 되는데, 이 때 rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일은 'stylesheet'라고 적어야 한다. 이 방식으로 스타일을 선언하면 많은 페이지가 있더라도 이 한 줄로 모든 페이지에 같은 스타일을 적용할 수 있으며, 수정할 때도 한 번에 모든 페이지에 반영할 수 있다. 이러한 익스터널 방식은 파일 관리가 편하면서도 용량이 작기 때문에 주로 사용된다.
 

HTML은 Hyper Text Markup Language의 약자다. 이 때의 Hyper Text는 문서 너머와 연결을 해 주는 텍스트, 즉 링크를 의미하고 Markup Language는 정보를 구조적/ 계층적으로 표현하는 언어란 뜻이다. 이번 포스트에서는 HTML에서 쓰이는 문법, 태그를 정리한다. <해당 포스트는 비전공자를 위한 HTML/CSS 강의 기반으로 작성됐다>

제목Heading 태그

<h1>역사</h1>
<h2>개발</h2>
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안했다.
... 이하 생략
<h2>최초 규격</h2>
HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작됐다.
... 이하 생략

문서 내 제목을 표현할 때 사용하는 태그다. 제목의 레벨에 따라서 <h1> ~ <h6>로 구분된다. <h1>은 보통 페이지를 대표하는 큰 제목으로 사용되며, 숫자가 올라갈 수록 낮은 수준의 소제목을 나타내는 데 사용한다. 제목 태그를 사용하면 일반 텍스트보다 크기와 굵기가 더 강조돼 보이는데, 이는 브라우저가 기본적으로 제목 태그에 제공하는 스타일이다.

단락Paragraph 태그

<h1>역사</h1>
<h2>개발</h2>
<p>
    1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안했다.
    ... 이하 생략
</p>
<h2>최초 규격</h2>
<p>
    HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작됐다.
    ... 이하 생략
</p>

단락 태그를 사용해 제목 외 본문 내용의 계층을 구분해 줄 수 있다. 위 예제는 제목 태그 예제와 동일한 형태로 노출되지만, 이전 예제보다 의미에 맞게 짜인 마크업 구조라고 볼 수 있겠다.
 

 

개행Linebreak 태그

1980년, <br>
유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 <br>
HTML의 원형인 인콰이어를 제안했다. <br>

HTML은 두 칸 이상의 공백 및 개행을 무시하기 때문에 여러 칸을 스페이스 바로 개행하더라도 화면에 나타나지는 않는다. 이럴 때 쓰이는 태그가 <br>이다. 개행하고자 하는 데서 <br>을 선언하면 개행된다. <br>은 개행 역할 외 내용이 존재하지 않는 빈 태그이며 별도로 닫기 태그를 사용해주지 않아도 된다.

텍스트 표현 태그

<b> : bold. 글자를 굵게 표현하는 태그.

<i> : italic. 글자를 기울여 표현하는 태그.

<u> : underline. 글자의 밑줄을 표현하는 태그.

<s> : strike. 글자의 중간선을 표현하는 태그.

상기 태그들은 텍스트를 변형해 보여주기 위한 태그고, 글씨의 강조 역할에는 기여하지 못 한다. 단, HTML5 버전에서는 <i> 태그만 기술적인 용어/ 외국어 문구/ 소설 속 인물의 생각 등의 표현을 할 때 사용된다는 의미가 추가됐다. 다른 표현형 태그에 의미를 부여하고 싶다면 아래 시멘틱 마크업 태그를 참고하자.

시멘틱 마크업Semantic Markup

<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>

앵커anchor 태그

<a href="http://www.naver.com/" target="_blank">네이버</a>

앵커 태그는 링크를 만드는 태그다. 앵커 태그의 기본형은 위와 같다. 링크로 이동할 목적지인 hrefhypertext reference URL 값을 선언해 줘야 작동하며, target 속성을 사용하면 링크된 리소스를 어디에 표시할지도 지정할 수 있다. target 속성에 _self를 사용하면 현재 창에, _blank를 사용하면 새로운 창에 각각 링크 페이지를 표시할 수 있으며, 별도로 지정해주지 않으면 자동으로 _self값으로, 현재 화면에 출력한다. 

이때 <a>에 들어가는 href 값을 꼭 외부 페이지로 설정할 필요는 없다. 페이지 내부의 특정 요소로 초점을 두고 이동할 수도 있으며 이를 내부 링크라고 한다. 이 때는 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적으면 된다.

<a href="#some-element-id">회사 소개로 이동하기</a>
<h1 id="some-element-id">회사 소개</h1>

보통 페이지에 내용이 많아 스크롤이 길어질 경우에, 빠르게 화면 최상단으로 이동시키기 위해 내부 링크를 사용한다. 웹페이지 화면 하단에 있는 'top', '맨 위로 이동하기' 버튼이 이에 해당한다.

컨테이너Container 태그

<div>
    <span>Lorem</span> ipsum dolor sit.
</div>

컨테이너 태그는 요소들을 묶기 위해 사용하는 태그다. 스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 이런 컨테이너 태그들이 많이 사용된다. 대표적인 컨테이너 태그는 <div>, <span>이다. 이 때 <div>는 블록 레벨(부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소)이고 <span>은 인라인 레벨(하나의 라인 안에서 자신의 내용만큼만 박스를 만드는 요소)이다.

리스트List 태그

리스트는 일련된 항목들이 나열된 것들을 의미한다. 콘텐츠가 많은 포털이나 검색 엔진같은 사이트에는 분야나 항목으로 구분할 것이 많으므로 리스트가 자주 사용된다. 리스트 태그는 순서가 없는 리스트를 표현할 때 사용되는 <ul> 태그, 순서가 있는 리스트를 표현할 때 사용되는 <ol> 태그, 용어와 정의를 표현할 때 사용되는 <dl> 태그로 구분한다.

<ul> 
    <li> 콩나물</li> 
    <li> 파</li> 
    <li> 국  간장</li> 
    ... 
</ul>

<ol>
    <li>냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다.</li>
    <li>콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.</li>
    <li>뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.</li>
    ...
</ol>

<dl>
    <dt>리플리 증후군</dt>
    <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
    <dt>피그말리온 효과</dt>
    <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
    <dt>언더독 효과</dt>
    <dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl>

이미지image 태그

<img src="./images/pizza.png" alt="피자">

<img>는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그다. 이미지 태그 역시 두 가지의 필수 속성값을 가지는데, 이미지의 경로를 나타내 주는 속성인 src와 이미지의 대체 텍스트를 나타내는 속성인 alt다.

별개로 width/ height로 크기값을 지정해줄 수 있으며 (값의 단위는 지정해주지 않아도 자동으로 픽셀 단위로 계산된다.) 이미지의 크기가 고정적이라면 미리 크기를 선언해 두는 것이 성능적인 측면에서 좋다. 두 개 모두 선언하지 않으면 원본 크기대로 노출되며 둘 중 하나만 선언하면 나머지 한 값의 비율대로 자동 변경돼 나온다. 반대로 둘 다 선언하면 원본 크기의 비율과 상관 없이 원하는 비율로 이미지를 끼워 넣을 수 있다.

src에 들어가는 이미지의 경로는 상대경로와 절대경로로 각각 지정해 줄 수 있다. 이 때 상대경로는 현재 웹 페이지를 기준으로(./) 상대적인 이미지의 위치를 나타내는 경로고 절대경로는 실제 그 이미지가 위치한 곳의 전체 경로다.

<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">

<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">

표table 태그

표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있으며, 가로 방향을 행row, 세로 방향을 열column이라 부른다. 하나의 테이블은 하나 이상의 <tr>로 이루어져 있으며, <tr>은 셀을 나타내는 <th>, <td>를 자식으로 가지게 된다. 표를 구성할 때는 위에서 밑으로, 좌측에서 우측으로 작성하면 된다.

<table> : 표를 나타내는 태그.
<tr> : 행을 나타내는 태그.
<th> : 제목 셀을 나타내는 태그.
<td> : 셀을 나타내는 태그.
 

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
    </tr>
</table>

위는 1부터 16까지를 4행 4열로 표현한 표를 나타내는 코드다. 브라우저 기준으로 코드를 작성해 확인하면 테두리가 없어 표가 어색해 보일 수 있는데, 이는 브라우저에서 제공하는 테이블의 기본 스타일에 테두리가 없기 때문이다. 확인을 위해 아래 CSS 코드를 <head> 안에 입력하면 테두리가 나타나는 걸 확인할 수 있다.

<style>
    th, td { border: 1px solid; }
</style>

표가 복잡해지면 표를 해석해서 음성으로 전달해야 하는 스크린 리더기와 같은 보조 기기를 통해서는 표의 내용을 이해하는 것이 어려워질 것이다. 따라서, 표를 구조적으로 파악하기 위해 도움이 되는 태그를 사용해야 한다.

<caption> : 표의 제목을 나타내는 태그.
<thead> : 제목 행을 그룹화하는 태그.
<tfoot> : 바닥 행을 그룹화하는 태그.
<tbody> : 본문 행을 그룹화하는 태그.

<table>

    <caption>Monthly Savings</caption>
    <thead>
        <tr>
            <th>Month</th>
            
<th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            
<td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            
<td>February</td>
            <td>$80</td>
        </tr>

    </tbody>
    <tfoot>
        <tr>
            
<td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>

</table>

폼form 태그

폼 요소는 서버에 데이터를 전달하기 위한 요소고, <input>은 대표적인 폼 요소다. <input> 자체는 내용 없는 빈 요소이나 후술할 type 속성을 통해 여러 종류의 입력 양식으로 나타나게 된다.

<input type="text" placeholder="ㅇㅇㅇ">

아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용하는 텍스트 타입. 텍스트 타입에는 placeholder 속성이 존재하는데, 이 속성을 이용하면 사용자가 입력하기 전에 미리 화면에 값을 노출해, 사용자가 입력해야 할 값의 양식을 표현해줄 수 있다.

<input type="password">

암호와 같이 공개할 수 없는 내용을 입력할 때 사용하는 패스워드 타입. 이 타입을 사용하면 화면엔 텍스트 타입과 같게 나타나지만 사용자가 실제로 입력할 땐 값을 노출하지 않는다.
 

<input type="radio" name="gender"> 남자
<input type="radio" name="gender"> 여자

라디오 버튼을 만들 때 사용하는 라디오 타입. 라디오 버튼은 중복 선택이 불가능하며 하나의 항목만을 선택해야 한다.

<input type="checkbox" name="hobby"> 등산
<input type="checkbox" name="hobby"> 독서
<input type="checkbox" name="hobby"> 운동

 
체크박스 버튼을 만들 때 사용되는 체크박스 타입. 체크박스는 중복 선택이 가능하다.

<input type="file">

파일을 서버에 올릴 때 사용하는 파일 타입. 브라우저에 따라 표현되는 형태는 조금씩 다르지만, 모두 같은 역할을 한다.

<form action="./test.html">
    메시지: <input type="text" name="message"><br>
    <input type="submit">
    <input type="reset">
    <input type="image" src="http://placehold.it/50x50?text=click" alt="click" width="50" height="50">
    <input type="button" value="버튼">
</form>

클릭 가능한 버튼을 만드는 submit, reset, image, button 타입.
 
submit : form의 값을 전송하는 버튼.
reset : form의 값을 초기화하는 버튼.
image : 이미지를 삽입할 수 있는 버튼. (submit과 동작이 동일함.)
button : 아무 기능이 없는 버튼.
 

<select>
    <option>서울</option>
    <option>경기</option>
    <option>강원</option>
    ...
</select>

<select>는 선택 목록 상자 또는 콤보박스라고도 한다. 몇 개의 선택지를 리스트 형태로 노출하고 그 중 하나를 선택할 수 있게 하는 태그다. 기본적으로 하나를 선택하는 형태로 만들어지지만 multiple 속성을 사용하면 다중 선택도 가능하다. <select> 내부의 <option>으로 각 항목을 표현해줄 수 있으며 <option> 내부에 selected 속성을 표현해주면 시작부터 선택된 항목을 구현할 수 있다.

<textarea rows="5" cols="30">
    ...
</textarea>

<textarea>는 한 줄만 입력할 수 있는 input의 텍스트 타입과 달리 여러 줄의 텍스트를 입력할 때 사용한다. cols와 rows 속성을 각각 줄 수 있으며 이때 cols는 가로 크기를, rows는 세로 크기를 조절하는 속성이다.

<button type="submit|reset|button">ㅇㅇㅇ</button>

<button>은 버튼을 만들 때 사용할 수 있으며 submit, reset, button 세 가지의 타입을 가진다. 세 버튼의 용도는 위에서 표기한 input의 동일 이름 타입과 같은 기능을 가진다. 다만, 빈 태그가 아니며 내용을 안에 직접 넣을 수 있어 input 대비 조금 더 자유로운 스타일을 표현할 수 있다는 장점이 있다.
 

<label for="name">이름</label>: <input type="text" id="name"><br>
<label for="nickname">이름</label>: <input type="text" id="nickname"><br>
<label for="address">이름</label>: <input type="text" id="address"><br>

<label>은 form 내부의 이름과 요소를 명시적으로 연결시키기 위해 사용한다. 사용을 위해서는 form 요소의 id 속성값과 <label>의 for 속성값을 같게 적어줘야 하며, <label>을 사용하면 클릭했을 경우 해당 <form> 요소를 클릭한 것처럼 동작한다. 사용성, 접근성 측면으로 중요한 역할을 하므로 반드시 써 주는 것이 좋다.

<fieldset>
    <legend>기본 정보</legend>
    ... 폼 요소들 ...
</fieldset>
<fieldset>
    <legend>부가 정보</legend>
    ... 폼 요소들 ...
</fieldset>

<fieldset>, <legend>는 form 요소를 구조화하기 위해 필요한 태그다. 여러 태그를 함께 쓸 때, <fieldset>의 바로 밑에는 반드시 자식 열인 <legend>가 위치해야 한다.

<fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용.
<legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성.

<form action="" method="">
    <fieldset>
        <legend>기본 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
    <fieldset>
        <legend>부가 정보</legend>
        ... 폼 요소들 ...
    </fieldset>
</form>

<form>은 form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해 주는 역할을 한다. <fieldset>으로 구조화돼 있다면 <fieldset>도 함께 감싸 줘야 한다. <form>에는 2가지 속성이 있는데, 데이터를 처리하는 서버의 주소를 표기하는  action 속성과 데이터를 전송하는 방식을 지정하는 method 속성이다. 이때 method 속성값에는 get/ post 두 가지 방식이 존재하며, get 방식은 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출되는 형식이며 post는 데이터가 전송될 때 노출되지 않는 형식이다.

단단한 표지 아래에는 초점이 흔들려 찍힌 레몬이 붙잡혀 있다. 레몬의 몸체를 이루는 샛노란 색은 한 번 보면 못 잊을 만치 강렬하지만 그 본체는 손 뻗어 잡지 못 할 만큼 흐릿하고 멀다. 그날 이후의 다언에게 해언이 그러했듯이, 아름답고 또 불가해(p.40)하다. 상실, 비통, 애도, 복수, 회복의 과정을 거치며 흐릿했던 레몬은 점차 선명해진다. 작품의 끝에서 다언은 충분히 선명해진 레몬을 움켜쥔다. 제 언니의 이름을 한 아이의 손을 잡는다. 그렇게 이젠 자신의 삶 그 자체가 된 레몬의 표면을 어루만진다.