Skip to content

Commit ad412c2

Browse files
milooymilooy
committed
위계 조정
1 parent bc22a45 commit ad412c2

File tree

5 files changed

+223
-21
lines changed

5 files changed

+223
-21
lines changed

‎src/components/Collapsible.tsx

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,12 @@ const Collapsible = ({
99
title,
1010
children,
1111
link,
12+
tag,
1213
}: {
1314
title: ReactNode
1415
children?: ReactNode
1516
link?: string
17+
tag?: string
1618
}) => {
1719
const [opened, setOpened] = useState(false)
1820
return (
@@ -25,7 +27,10 @@ const Collapsible = ({
2527
setOpened(!opened)
2628
}}
2729
>
28-
{title}
30+
<Flex align="center">
31+
{tag != null && <Tag style={{ marginRight: 5 }}>{tag}</Tag>}
32+
{title}
33+
</Flex>
2934
<Flex align="center">
3035
{link && (
3136
<a href={link} target="_blank">
@@ -74,6 +79,17 @@ const Title = styled.div`
7479
}
7580
`
7681

82+
const Tag = styled.div`
83+
display: flex;
84+
align-items: center;
85+
background-color: #fff5df;
86+
font-size: 0.9rem;
87+
font-weight: 700;
88+
padding: 3px 7px;
89+
border-radius: 10px;
90+
color: #707070;
91+
`
92+
7793
const Wrapper = styled.div`
7894
background: #f4f3f2a3;
7995
border-radius: 6px;
@@ -104,4 +120,4 @@ const Contents = styled.div<{ opened: boolean }>`
104120
transition: max-height 0.2s;
105121
`
106122

107-
export default Collapsible
123+
export default Collapsible

‎src/components/CollapsibleHeading.tsx

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React, { ReactNode, useState } from "react"
2+
import styled from "styled-components"
3+
import ChevronDown from "../images/chevron-down.png"
4+
import ChevronUp from "../images/chevron-up.png"
5+
import Link from "../images/link.png"
6+
import { Flex } from "./Flex"
7+
8+
const CollapsibleHeading = ({
9+
title,
10+
children,
11+
tag,
12+
}: {
13+
title: ReactNode
14+
children?: ReactNode
15+
tag?: string
16+
}) => {
17+
const [opened, setOpened] = useState(false)
18+
return (
19+
<Wrapper>
20+
<Title
21+
onClick={() => {
22+
if (children == null) {
23+
return
24+
}
25+
setOpened(!opened)
26+
}}
27+
>
28+
29+
<img
30+
style={{
31+
width: 20,
32+
height: 20,
33+
opacity: 0.3,
34+
verticalAlign: "middle",
35+
rotate: opened ? '180deg' : '90deg',
36+
transition: 'rotate 0.1s',
37+
}}
38+
src={ChevronUp}
39+
alt="chevron"
40+
/>
41+
{tag != null && <Tag style={{ marginRight: 5 }}>{tag}</Tag>}
42+
{title}
43+
</Title>
44+
{opened && (
45+
<Contents>
46+
{children}
47+
<div style={{ marginTop: 20 }} />
48+
</Contents>
49+
)}
50+
</Wrapper>
51+
)
52+
}
53+
54+
const Title = styled.div`
55+
display: flex;
56+
align-items: center;
57+
cursor: pointer;
58+
&:hover {
59+
color: var(--color-primary);
60+
}
61+
`
62+
63+
const Tag = styled.div`
64+
display: flex;
65+
align-items: center;
66+
background-color: #fff5df;
67+
font-size: 0.9rem;
68+
font-weight: 700;
69+
padding: 3px 7px;
70+
border-radius: 10px;
71+
color: #707070;
72+
`
73+
74+
const Wrapper = styled.div`
75+
margin-bottom: 0.5rem;
76+
font-size: 1rem;
77+
&:last-child {
78+
margin-bottom: 0;
79+
}
80+
ul {
81+
margin: 0 0 0 1rem;
82+
83+
li {
84+
margin-bottom: 0;
85+
}
86+
}
87+
`
88+
89+
const Contents = styled.div`
90+
color: #6f7172;
91+
padding-left: 21px;
92+
`
93+
94+
export default CollapsibleHeading

‎src/pages/resume-content/도메인리드.mdx

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,32 @@
1+
import CollapsibleHeading from "../../components/CollapsibleHeading"
12
import { SubHeading2 } from "../../components/SubHeading"
23

3-
<SubHeading2>다양한 팀과의 협업을 통한 기술적 의사결정</SubHeading2>
4+
<CollapsibleHeading title="다양한 팀과의 협업을 통한 기술적 의사결정 및 설득">
45

5-
- <u>회원 시스템 전수조사</u>: 다양한 회원 시스템 코드를 전수조사해 규칙을 세워
6-
여러 계열사에서도 쉽게 적용할 수 있도록 SDK 형태로 배포
6+
<SubHeading2>B2B 체계 기술적 통합</SubHeading2>
7+
8+
- <u>회원 통합</u>: 다양한 회원 시스템 코드를 전수조사해 규칙을 세워 여러
9+
계열사에서도 쉽게 적용할 수 있도록 SDK 형태로 배포
710
- <u>주요 팀 프론트엔드 개발자들과의 협업 조율</u>: 여러 팀(예: 토스 광고, 토스
811
쇼핑팀)과 협업하여 코드 리뷰 및 기술적 방향성 조율, 각 팀의 요구사항을 반영해
912
통합된 기술 솔루션 제시
1013
- <u>글로벌 네비게이션 설계</u>: 모든 서비스에서 동일한 글로벌 네비게이션을 추가
1114
배포 없이 제공할 수 있도록 Module Federation 방식으로 설계.
1215

16+
<SubHeading2>조직의 새로운 기술 환경 도입 설득 전략</SubHeading2>
17+
18+
- <u>플랫폼 레벨의 비전 제시</u>: 이 태스크가 조직 레벨의 어떤 목표를 달성하기
19+
위한 것인지 설명. 이를 달성하기 위한 단계를 쪼개고, 현재 어느 단계에
20+
와있는지를 명기.
21+
- <u>쉬운 매뉴얼 공유</u>: 예시 코드와 이를 도입하기 위한 체크리스트를 제공해
22+
필요 리소스를 미리 예측할 수 있고, 각 개발자의 시행착오를 최소화.
23+
- <u>짝지어 도입하기</u>: 각 도메인의 개발자들을 한 데 모아 함께 도입하도록
24+
유도해 '혼자'라는 부담을 줄이고, 긍정적 피어프레셔를 유도.
25+
26+
</CollapsibleHeading>
27+
28+
<CollapsibleHeading title="데스크탑 플랫폼의 기술적 문제 해결 주도">
29+
1330
<SubHeading2>데스크탑 플랫폼의 기술적 문제 해결 주도</SubHeading2>
1431

1532
- <u>데스크탑 플랫폼 통합</u>: 기존 B2B 데스크탑 서비스를 통합하는 과정에서 각
@@ -20,6 +37,10 @@ import { SubHeading2 } from "../../components/SubHeading"
2037
이 표준을 수립하기 위해 데이터 분석가 및 DevOps 팀과 협력하여 공식 채널 생성
2138
및 실행 계획 수립
2239

40+
</CollapsibleHeading>
41+
42+
<CollapsibleHeading title="팀과 조직을 아우르는 피드백 수집 및 반영">
43+
2344
<SubHeading2>팀과 조직을 아우르는 피드백 수집 및 반영</SubHeading2>
2445

2546
- <u>도메인 기대사항 반영</u>: 도메인 리더들과 정기적으로 소통하며 협업 피드백을
@@ -28,3 +49,4 @@ import { SubHeading2 } from "../../components/SubHeading"
2849
- <u>팀 코칭 및 성장 지원</u>: 프론트엔드 직군뿐만 아니라 디자이너, iOS 개발자,
2950
컬쳐팀과 함께 '팀 코칭' 스터디를 진행. 각 직군의 성장과 협업을 촉진하기 위한
3051
실질적인 전략을 제안하고 실행
52+
</CollapsibleHeading>

‎src/pages/resume-content/토스서비스개발.mdx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { SubHeading2 } from "../../components/SubHeading"
2+
3+
<SubHeading2>토스비즈니스</SubHeading2>
4+
5+
- 주소: https://business.toss.im/
6+
- 기간: 2024.02 ~ 현재
7+
- 비즈니스 목표: 토스 내 여러 B2B 도메인(광고, 쇼핑, 페이 등)이 하나의 앱처럼 유기적으로 움직일 수 있는 플랫폼 생성
8+
- 사용 기술: React(CSR 환경)
9+
10+
<SubHeading2>토스모바일</SubHeading2>
11+
12+
- 주소: https://tossmobile.co.kr/
13+
- 기간: 2022.04 ~ 2024.02
14+
- 비즈니스 목표: 인수한 알뜰폰 통신사를 통해 토스모바일 사업을 혁신적으로 이끌어내는 것
15+
- 사용 기술: React(Next.js를 사용한 SSR 환경), 모바일 웹앱, 토스앱과 분리된 새로운 앱(토스보험파트너 앱) 환경 구축
16+
17+
<SubHeading2>토스보험</SubHeading2>
18+
19+
- 주소: https://blog.toss.im/article/toss-insurance-partner
20+
- 기간: 2020.02 ~ 2022.03
21+
- 비즈니스 목표: 온라인화가 상대적으로 부족한 보험 업계를 스크래핑, 마이데이터를 활용해 혁신
22+
- 사용 기술: React(Next.js를 사용한 SSR 환경), 모바일 웹앱
23+
24+
---
25+
26+
<SubHeading2>주요 도전 과제</SubHeading2>
27+
<u>1. B2B 회원 체계 통합 (OAuth)</u>
28+
29+
- Cookie, JWT 등 각자의 스펙으로 각자의 도메인에서 운영하던 회원
30+
체계를 OAuth로 단일화 (하나의 사이트로 리디렉션해 가입/로그인하는 방식) 및 여러 도메인 개발자와의 협업
31+
- 한 번의 가입으로 토스 내의 여러 B2B 서비스를 이용할 수 있는 마이그레이션 플로우 설계 및 개발
32+
- 서비스를 넘나드는 QA 프로세스 구축 (조건에 맞는 회원정보 DB화, 템플릿 수립)
33+
34+
<br />
35+
<u>2. 로그 표준 논의 주도</u>
36+
37+
- 유저가 데스크탑 서비스간에 이동시 식별ID 유실
38+
문제를 인지하고 범-서비스간 보존되는 Browser ID 표준을 만들기 위해 타 도메인의
39+
F-lead, Data Analyst, DataOps Manager와 회의를 진행하여 행동 계획 수립 및 공식
40+
채널 생성
41+
42+
<br />
43+
44+
<u>3. 에러 민감도를 높여 서비스 안정화 및 디버깅이 용이한 환경 구축</u>
45+
46+
- 통합 서비스를 개발하니 이 서비스가 장애가 난다면 관련된 모든 팀에게 영향을 미치는 강결합이 생김
47+
- 전반적인 피드백 채널과 최대한 빠르게 확인해야 하는 에러 제보 채널을 분리해 후자 채널은 모든 메세지가 이슈트래커 티켓으로 만들어지고, 주요 팀원들을 자동으로 멘션하도록 셋업
48+
- 고객-CX-개발자 핑퐁을 줄이기 위해 디버깅에 필요한 정보를 고객에게 미리 받아 CX가 개발자에게 전달하는 솔루션 개발 및 프로세스 수립
49+
50+
<br />
51+
52+
<u>4. B2B UI/UX 대통합</u>
53+
54+
- 목표
55+
- 토스 내 여러 B2B 서비스들이 단일한 앱으로 보이기 위해 통일된 디자인 표준 구축
56+
- 이미 오류 없이 잘 동작하고 있는 코드베이스를 표준 디자인으로 변경해달라고 타 서비스 개발자, 디자이너를 설득해야 하는 상황
57+
- 해결
58+
1. 플랫폼 레벨의 비전 제시: 이 태스크가 조직 레벨의 어떤 목표를 달성하기 위한 것인지 설명. 이를 달성하기 위한 단계를 쪼개고, 현재 어느 단계에 와있는지를 명기.
59+
2. 쉬운 매뉴얼 공유: 예시 코드와 이를 도입하기 위한 체크리스트를 제공해 필요 리소스를 미리 예측할 수 있고, 각 개발자의 시행착오를 최소화.
60+
3. 짝지어 도입하기: 각 도메인의 개발자들을 한 데 모아 함께 도입하도록 유도해 '혼자'라는 부담을 줄이고, 긍정적 피어프레셔를 유도.
61+
- 결과
62+
- (TBD)

‎src/pages/resume.mdx

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import CompanyExperience from "../components/CompanyExperience"
2121
import SmallItalic from "../components/SmallItalic"
2222
import SubHeading from "../components/SubHeading"
2323
import Collapsible from "../components/Collapsible"
24+
import CollapsibleHeading from "../components/CollapsibleHeading"
2425
import Gallary from "../components/Gallary"
2526
import { SubHeading2 } from "../components/SubHeading"
2627

@@ -30,9 +31,7 @@ import 퍼블릭스피킹Content from "./resume-content/퍼블릭스피킹.mdx"
3031
import 장애감소Content from "./resume-content/장애감소.mdx"
3132
import ZeplContent from "./resume-content/zepl.mdx"
3233
import ShootContent from "./resume-content/shoot.mdx"
33-
import 토스비즈니스Content from "./resume-content/토스비즈니스.mdx"
34-
import 토스모바일Content from "./resume-content/토스모바일.mdx"
35-
import 토스보험Content from "./resume-content/토스보험.mdx"
34+
import 토스서비스개발Content from "./resume-content/토스서비스개발.mdx"
3635

3736
> Product oriented front-end engineer
3837
@@ -135,26 +134,35 @@ import 토스보험Content from "./resume-content/토스보험.mdx"
135134
## 프로젝트
136135

137136
<SubHeading>Viva Republica (Toss)</SubHeading>
138-
<Collapsible title="[기술 리더십] 여러 팀을 넘나들며 조율하는 도메인의 기술적 리드">
137+
<Collapsible
138+
tag="기술 리더십"
139+
title="여러 팀을 넘나들며 조율하는 도메인의 기술적 리드"
140+
>
139141
<도메인리드Content />
140142
</Collapsible>
141-
<Collapsible title="[팀 성장] 부드러운 리더십을 통한 구성원 발전 및 회사 목표와의 조화">
143+
<Collapsible
144+
tag="팀 성장"
145+
title="부드러운 리더십을 통한 구성원 발전 및 회사 목표와의 조화"
146+
>
142147
<FLeadContent />
143148
</Collapsible>
144-
<Collapsible title="[채용 및 브랜딩] 채용 및 브랜딩을 위한 퍼블릭 스피킹에서 가장 먼저 찾는 개발자">
149+
<Collapsible
150+
tag="채용 및 브랜딩"
151+
title="채용 및 브랜딩을 위한 퍼블릭 스피킹에서 가장 먼저 찾는 개발자"
152+
>
145153
<퍼블릭스피킹Content />
146154
</Collapsible>
147-
<Collapsible title="[문제 해결] 장애의 근본적인 차단과 CS 감소를 위한 액션 플랜">
155+
<Collapsible
156+
tag="문제 해결"
157+
title="장애의 근본적인 차단과 CS 감소를 위한 액션 플랜"
158+
>
148159
<장애감소Content />
149160
</Collapsible>
150-
<Collapsible title="[서비스 개발] 토스비즈니스 플랫폼 구축">
151-
<토스비즈니스Content />
152-
</Collapsible>
153-
<Collapsible title="[서비스 개발] 토스모바일 서비스 구축 및 유지보수">
154-
<토스모바일Content />
155-
</Collapsible>
156-
<Collapsible title="[서비스 개발] 보험 서비스 유지보수 및 토스보험파트너 서비스 구축">
157-
<토스보험Content />
161+
<Collapsible
162+
tag="서비스 개발"
163+
title="보험, 토스모바일, 토스비즈니스 프론트엔드 개발"
164+
>
165+
<토스서비스개발Content />
158166
</Collapsible>
159167

160168
<SubHeading>Zepl</SubHeading>
@@ -282,4 +290,4 @@ NHN NEXT (1기) - 컴퓨터 공학 2013.03 - 2016.02
282290
<img alt="image" src="/assets/resume/devc2.png" />
283291
<img alt="image" src="/assets/resume/devc.png" />
284292
</Gallary>
285-
</Collapsible>
293+
</Collapsible>

0 commit comments

Comments
 (0)